Html 并排对齐div-角度

我一直在试着在我的小组中将我的回答或数据并排排列，但这对我来说是可行的。我可能做错了什么。我知道这很基本，但我是个初学者。我希望浅蓝色的div与奶油色div对齐。请帮助

<div class="container">

<div *ngFor="let client of Clients">

    //light blue

    <div *ngIf="currentChat.user_email==client.from" class="pull-right well well-sm" style="background-color:mintcream;">

  {{client.line_text}} 
   <small class="text-muted">{{client.from}} | {{client.created_at}}</small>




        </div>


//creamish
<div *ngIf="currentChat.client_email==client.from" class="well well-sm" style="width:40%; background-color:antiquewhite">

    {{client.line_text}} 
   <small class="text-muted">{{client.from}} | {{client.created_at}}</small>






    </div>
</div>
</div>

//浅蓝色
{{client.line_text}
{{client.from}}{{client.created{u at}}
//奶油的
{{client.line_text}
{{client.from}}{{client.created{u at}}

---

既然您使用的是向右拉，我假设您使用的是引导， 问题是pull right类使其向右浮动，因此它开始横向堆叠

我建议使用bootstrap的网格系统生成2列，并将div堆叠在那里

像这样：

<div class="row">
  <div class="col-xs-6">
     <!-- Textbox -->
     <div class="well well-sm" style="background-color:mintcream">
      Text Here
    </div>
    <!-- Textbox -->
     <div class="well well-sm" style="background-color:mintcream">
      Text Here
    </div>
  </div>
  <div class="col-xs-6">
   <!-- Textbox -->
    <div class="well well-sm" style="background-color:antiquewhite">
      Text Here
    </div>
    <!-- Textbox -->
    <div class="well well-sm" style="background-color:antiquewhite">
      Text Here
    </div>
  </div>
</div>

此处文本
此处文本
此处文本
此处文本

所以你把这两部分分成两列，填充它们，而不是向右浮动

这会给你一个这样的输出