您可以使用Bootstrap行和列：

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">
      <p class="header">Guest Name</p>
      <p class="text">Nilesh Belurkar</p>
    </div>
    <div class="col">
      <p class="header">Claim Number</p>
      <p class="text">123456789</p>
    </div>
    <div class="col">
      <p class="header">Phone</p>
      <p class="text">7218811333</p>
    </div>
    ...
  </div>
</div>

这里您要做的是创建一个包含row-cols-auto类的父div，它将调整每行自动显示的列数。
然后在每个子元素中，分配类"col"，以指示Bootstrap必须将这些div视为列。
然后在每个column元素中，放置你的子元素，因为"col"类已经有了显示：默认情况下已设置块特性。
您可以在Bootstrap文档中查看更多详细信息：www.example.comhttps://getbootstrap.com/docs/5.0/layout/grid/#row-columns
实时预览：https://playcode.io/1150513

试试这个：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap-grid.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row row-cols-auto">
    <div class="col">
      <p>Guest Name</p>
      <!-- <p class="text">Nilesh Belurkar</p> -->
      <p>Company Name</p>

    </div>
    <div class="col">
      <p>Nilesh Belurkar</p>
      <!-- <p>Claim Number</p> -->
      <p class="text">ABC Company</p>
    </div>
    <div class="col">
      <p>Claim Number</p>
      <!-- <p>Claim Number</p> -->
      <p class="text">Phone</p>
    </div>
    <div class="col">
      <p>123444</p>
      <!-- <p>Claim Number</p> -->
      <p class="text">+9200000000</p>
    </div>

  </div>