html - div 对齐取决于它上面的 div (bootstrap)

Question

我在一个带有行类的 div 中有 6 个 div。每个 div 都有一个“mb-1”，我希望前 3 个 div 下面的 3 个 div 根据第一个 div 的高度进行调整。它们之间应该只有 mb-1 边距。（顶部和底部）。它应该看起来像这样。我该怎么做？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="row justify-content-center align-items-start ">

  <div class="bg-primary col-md-3 ml-3 mr-3  mb-1 text-center" >
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
   </div>
   
  <div class="bg-danger col-md-3 ml-3 mr-3  mb-1 text-center">
      <p>HHAHAHAHA</p>
      <p>HHAHAHAHA</p>
  </div>

  <div class="bg-warning col-md-3 ml-3 mr-3  mb-1 text-center">
    <p>HHAHAHAHA</p>
  </div>

  <div class="bg-danger col-md-3 ml-3 mr-3  mb-1 text-center" >
    <p>HHAHAHAHA</p>    
  </div>

   <div class="bg-warning col-md-3 ml-3 mr-3  mb-1 text-center">
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
  </div>

  <div class="bg-primary col-md-3 ml-3 mr-3  mb-1 text-center">
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
  </div>
  
</div>

标签： htmlcss