JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="grid">
  <div class="grid-a">A</div>
  <div class="grid-b">B</div>
  <div class="grid-a">Aaaa</div>
  <div class="grid-b">B</div>
  <div class="grid-a">A</div>
  <div class="grid-b">B</div>
  <div class="grid-a">A</div>
  <div class="grid-b">B</div>
  <div class="grid-a">Akkkkkkkkkkkk  kkkkkkkk</div>
  <div class="grid-b">Bbbbbbbbb</div>
  <div class="grid-a">A</div>
  <div class="grid-b">B</div>
  <div class="grid-a">A</div>
  <div class="grid-b">B</div>
  <div class="grid-b">B</div>
</div>

CSS

.grid {
  display:grid;
  grid-template-columns: max-content max-content;
}

.grid-a {
  background:red;
  grid-column:1;
}
.grid-b {
  background:blue;
  grid-column:2;
}