Angular button icon position with text in single line

Question

How to make a position for word and button on the same line. Word should be left and button should be on end

<div class="h2 secondary-text">
   Text
   <button mat-icon-button
      class="m-0 mr-16 secondary-text"
      (click)="activeModal.close('Close click')">
      <mat-icon>close</mat-icon>
   </button>
</div>

Answer 1

This can be easily achieved by using flex css. You can try this

html

<div class="wrapper">
  <div class="secondary-text">
    Text
  </div>
  <div class="icon-cls">
    <button mat-icon-button
      class="m-0 mr-16 secondary-text">
      <mat-icon>close</mat-icon>
   </button>
  </div>
</div>

css

.wrapper{
  display:flex;

}

.secondary-text{
  flex: 1
}

.icon-cls{
  flex: 1;
  text-align:right;
}