How can I add a list of icons to the right of a text area

Question

What I want to do is add 3 icons to the right of a text area. The text area will be a list of text areas so each row will have the combination of text area -> icons

I have the textarea and icon on the right but I need them to look like the photo

<ng-template #item let-item let-index="index">
    <nz-row>
        <textarea disabled="true" id="CommentBox_{{ index }}" [(ngModel)]="item.commentText" nz-input rows="4"></textarea>
        <button nz-button nzGhost>
            Edit
        </button>
        <button nz-button nzGhost>
            Delete
        </button>
        <button nz-button nzGhost>
            Save
        </button>
    </nz-row>
</ng-template>  

    

Answer 1

You Just have to make the icons right then it should work!! :D

Html

<ng-template #item let-item let-index="index">
  <nz-row class="comment-row">
    <div class="container">
      <div class="textarea-container">
        <textarea disabled="true" id="CommentBox_{{ index }}" [(ngModel)]="item.commentText" nz-input rows="4"></textarea>
      </div>
      <div class="icon-container">
        <ul class="icon-list">
          <li>
            <button nz-button nzGhost class="edit-icon">
              Edit
            </button>
          </li>
          <li>
            <button nz-button nzGhost class="delete-icon">
              Delete
            </button>
          </li>
          <li>
            <button nz-button nzGhost class="save-icon">
              Save
            </button>
          </li>
        </ul>
      </div>
    </div>
  </nz-row>
</ng-template>

Css:

.comment-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.container {
  display: flex;
  align-items: flex-start;
}

.textarea-container {
  margin-right: 10px; /
}

.icon-container {
  display: flex;
  flex-direction: column;
}

.icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon-list li {
  margin-bottom: 5px; 
}

textarea {
  width: 100%;
}