JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="group">
    <div class="header">
      <h2>Lorem ipsum</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo. In cum adolescens necessitatibus, et hinc nominati indoctum his, idque prompta moderatius cu per. Quo ei novum utroque, ius ex graecis volutpat quaerendum! Ea assum erroribus accommodare pri, simul omnesque scaevola has cu, an putant tacimates ius. Ius soluta nonumes ei? Ex modus eligendi repudiandae ius, nec cu quem delicatissimi.</p>
  </div>

  <div class="group">
    <div class="header">
      <h2>AAA</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, explicabo.</p>
  </div>

  <div class="group">
    <div class="header">
      <h2>Dolor sit</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo. In cum adolescens necessitatibus, et hinc nominati indoctum his, idque prompta moderatius cu per. Quo ei novum utroque, ius ex graecis volutpat quaerendum!</p>
  </div>

  <div class="group">
    <div class="header">
      <h2>BBB</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  </div>

  <div class="group">
    <div class="header">
      <h2>CCC</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.container {
  outline: 1px dotted red;
  height: 200px;
  -moz-column-width: 10em;
  column-width: 10em;
  -moz-column-fill: auto;
  column-fill: auto;
  overflow-x: auto;
  padding-top: 1.7em;
  position: relative;
}

.group + .group {
  break-before: column; /* Firefox? */  
}

.header {
  height: 0;
  border-bottom: 1px solid;
}

h2 {
  margin: 0;
  position: absolute;
  top: 0;
}

p {
  margin: 0;
}