JSFiddle - React, Tailwind, and code Playground

by nicholas_r

HTML

<div class="wrapper">
  
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum facere, praesentium. Vel vero, dignissimos reprehenderit, accusamus quod unde. Ex at provident sit! Tenetur eos hic rerum, nostrum sunt dolores? Vitae!</div>
  <div class="col">Eaque eveniet dolorem vitae nulla, unde alias sunt at nisi consectetur aliquid ducimus perspiciatis quam quibusdam. Atque ipsam quaerat illo dolores expedita, alias, officiis omnis nostrum consequuntur quo sequi nesciunt.</div>
  <div class="col">Ipsa cumque eos aut nihil quidem qui at repudiandae quia a totam earum quaerat velit, cum quae, quam sit sapiente veritatis magni libero repellat, dolorem. Asperiores non nam nobis beatae!</div>
  <div class="col">Nisi sunt explicabo a nemo reprehenderit molestiae numquam consectetur ea temporibus saepe, dolorum eos, eveniet natus, eaque ab praesentium libero ipsam error fugit, laboriosam recusandae reiciendis beatae at incidunt! Aut.</div>
  
</div>

CSS

.wrapper:before,
.wrapper:after{
  content: '';
  display: block;
}

.wrapper:after{
  clear: both;
}

.col{
  float: left;
  padding: 0 5px;
  width: calc(100% / 4);
  box-sizing: border-box;
}