Q: I want add two two div's in a single div I want add two div's in a single div one is to right and other is to left.


<html>
<div>

      <div><button  class="mat-button menu-button">
          <mat-icon color="primary"> remove </mat-icon>
          Add Site
        </button>
      </div>  
      <div *ngIf="showButtons">
          <button>edit</button>
            <button >Save</button>
      </div>
  
  </div>
  </html>



A: use float css property to align div left and right


.left {
  float: left;
}

.right {
  float: right;
}
<div>

  <div class='left'><button class="mat-button menu-button">
          <mat-icon color="primary"> remove </mat-icon>
          Add Site
        </button>
  </div>
  <div *ngIf="showButtons" class='right'>
    <button>edit</button>
    <button>Save</button>
  </div>

</div>



A: you can use ng-container instead of div for button one is to right and other is to left.
<div>
    <button class="mat-button menu-button">
        <mat-icon color="primary"> remove </mat-icon>
        Add Site
    </button>
    <ng-container *ngIf="showButtons">
        <button>edit</button>
        <button>Save</button>
    </ng-container>
</div>


A: You could set the display to flex, the default direction is row :


<div style="display:flex;">

      <div><button  class="mat-button menu-button">
          <mat-icon color="primary"> remove </mat-icon>
          Add Site
        </button>
      </div>  
      <div *ngIf="showButtons">
          <button>edit</button>
            <button >Save</button>
      </div>
  
  </div>



A: 

.firstCol{
float : left;
}
<html>
   <div class="container">
      <div class="row">
          <div class="col-md-12">
              <div class="firstCol"><button  class="mat-button menu-button">
                 <mat-icon color="primary"> remove </mat-icon>
                   Add Site
                  </button>
              </div>  
              <div *ngIf="showButtons">
                 <button>edit</button>
                 <button >Save</button>
              </div>
           </div>
        </div>
    </div>
</html>



A: You did it well, just add a class name or an Id on the div and you can do what you want with CSS with for exemple the float property.
