JSFiddle - React, Tailwind, and code Playground

by stopsatgreen

HTML

<div id="container">
  <div id="box1" class="box">
    <div class="box-header">
      <h2>Some text</h2>
      <h1>This is a heading of variable length</h1>
    </div>
    <div class="box-body">
      <p>Blah blah</p>
    </div>
  </div>
  <div id="box2" class="box">
    <div class="box-header">
      <h2>Some text</h2>
      <h1>This is a heading of variable length</h1>
    </div>
    <div class="box-body">
      <p>Blah blah</p>
    </div>
  </div>
  <div id="box3" class="box">
    <div class="box-header">
      <h2>Some text</h2>
      <h1>This is a heading of variable</h1>
    </div>
    <div class="box-body">
      <p>Blah blah</p>
    </div>
  </div>
</div>

CSS

#container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
}

.box-header {
  background-color: blue;
  grid-row: 1;
}

.box-body {
  grid-row: 2;
}

.box {
  display: subgrid;
}

.box {
  grid-row: 1 / 2;
}

#box1,
#box1 .box-header,
#box1 .box-body {
  grid-column: 1;
}

#box2,
#box2 .box-header,
#box2 .box-body {
  grid-column: 2;
}

#box3,
#box3 .box-header,
#box2 .box-body {
  grid-column: 3;
}