JSFiddle - React, Tailwind, and code Playground

by pashok05_01

HTML

<div class="grid-wrap">
  <div class="grid-item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio fuga rem perspiciatis magni unde dolorum. Odio sequi assumenda quidem maxime. Rerum eveniet voluptatibus quam fuga libero laborum ex provident error.</div>
  <div class="grid-item">Excepturi ut quas itaque doloribus consequatur iste eaque, et sapiente nostrum necessitatibus quis facere, voluptates ea voluptatem? Hic doloremque at sapiente ipsam qui ipsum perferendis eius quam reiciendis, provident praesentium?</div>
  <div class="grid-item">Nobis odio mollitia provident voluptatem harum facere, illum debitis velit quaerat? Laborum accusamus ea cupiditate, velit repellat laboriosam aliquam alias nisi hic distinctio temporibus debitis unde quasi nesciunt consequuntur mollitia.</div>
</div>

CSS

.grid-wrap {
  width: 100%;
  min-height: 150px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 15px;
}

.grid-item {
  padding: 20px;
}

.grid-item:nth-child(1) {
  grid-row: 1 / 3;
  background-color: red;
}

.grid-item:nth-child(2) {
  grid-row: 1 / 4;
  background-color: blue;
}

.grid-item:nth-child(3) {
  background-color: green;
}