JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="grid">
  <div class="blah">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officiis omnis excepturi dolores nisi quasi, blanditiis necessitatibus obcaecati? Quo, esse vitae quis. Quae doloribus aperiam dicta cupiditate delectus nemo eos.</div>
  <div class="baz">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero ratione, ipsum, autem fugiat commodi iusto et nemo voluptates, quae necessitatibus nulla unde adipisci incidunt officia repudiandae aliquid itaque facilis magnam.</div>
</div>

CSS

.grid {
  display: grid;
  gap: 1rem;
  grid: 1fr / repeat(12, 1fr);
  margin: 0 auto;
  max-width: 1200px;
}

.blah {
  background-color: lightsalmon;
  grid-column: 1 / 4;
}

.baz {
  background-color: lavenderblush;
  grid-column: 9 / 13;
}