JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="container">
  <div class="item">
    <div class="item-wrap">1</div>
  </div>
  <div class="item">
    <div class="item-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio cupiditate deleniti delectus maxime saepe sed voluptatem, blanditiis dolorum dicta qui odio beatae, rerum ducimus aliquam, ipsa sunt! Magni eos, error!</div>
  </div>
  <div class="item">
    <div class="item-wrap">3</div>
  </div>
  <div class="item">
    <div class="item-wrap">4</div>
  </div>
  <div class="item">
    <div class="item-wrap">5</div>
  </div>
  <div class="item">
    <div class="item-wrap">6</div>
  </div>
</div>

CSS

div.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
div.item {
  flex: 0 0 calc(100% / 3);
  width: calc(100% / 3);
  max-width: calc(100% / 3);
}
div.item-wrap {
  height: 100%;
}