如何将一个元素放在 div 中其他元素的右侧？

所以我想让我的按钮看起来像这样：

想要的结果

但我不知道我应该怎么做才能让它工作，这是我的 HTML 代码：

<div  class="content" *ngIf="loading==false" >
      <div class="product" *ngFor="let product of products$ | async ; let i = index">
        <div class="header">
        <h1 class="product-name">Product name : {{product.Name}}</h1>
        <h2 class="product-id">Product id : {{product.Id}} </h2>
        <button (click)="addCanvasModel(product.Id)">Add new Canvas Model</button>
      </div>
      <div fxLayout="row wrap" fxLayoutGap="3px grid">
        <div *ngFor="let model of myObservables[i] | async"> 
          <app-bmc-card-preview [name]="model.Designation" [id]="model.Id" [behaviour_subject]="refreshModels$"></app-bmc-card-preview>
        </div>
      </div>
    </div>
  
</div>

这是我的 CSS 代码：

.product {
    background-color: white;
    border:1px solid black;
    font-family: roboto;
    text-align: left;
    margin:10px;
}