JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="gridtainer">
  <div class="thing">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus atque natus, culpa optio obcaecati, eius aperiam dolor ad ut, quos suscipit labore! Quae cupiditate rerum, velit laborum sit facilis veritatis!</div>
  
  <div class="banana">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim libero aut praesentium nihil illo tempore non commodi, illum tenetur officia quam accusamus dolor at necessitatibus corrupti, deserunt incidunt ipsam! Tempora.</div>
</div>

CSS

.gridtainer {
  display: grid;
  grid-template: "left-gutter container container right-gutter" / minmax(32px, 1fr) minmax(128px, 600px) [center] minmax(128px, 600px) minmax(32px, 1fr);
}

.thing {
  grid-area: container;
  background-color: pink;
}

.banana {
  grid-column: center / right-gutter;
  background-color: yellow;
}