JSFiddle - React, Tailwind, and code Playground

by Kolichikov

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container">
  <div class="column-cell grid-divider" style="grid-column:first/last;grid-row:r0/r1;">
    <div>1 Term</div>
  </div>
  <div class="row grid-divider" style="grid-column:first/second;grid-row:r1/r2;">
    <div class="col-12">sept</div>
    <div class="col-12">oct</div>
    <div class="col-12">nov</div>
  </div>
  <div class="row grid-divider" style="grid-column:first/second;grid-row:r2/r3">
    <div class="col-12">sept 30</div>
    <div class="col-12">oct 15</div>
    <div class="col-12">dec 12</div>
    <div class="col-12">dec 19</div>
  </div>
  <div class="row grid-divider" style="grid-column:first/second;grid-row:r3/r4">
    <div class="col-12">school is closed.</div>
  </div>
  <div class="column-cell grid-divider" style="grid-column:second/last;grid-row:r1/r2;">
    <div>school open</div>
  </div>
  <div class="column-cell grid-divider" style="grid-column:second/last;grid-row:r2/r3">
    <div>important dates</div>
  </div>
  <div class="column-cell grid-divider" style="grid-column:second/last;grid-row:r3/r4">
    <div>kanikuly</div>
  </div>
</div>

CSS

.container
{
  display:grid;
  grid-template-columns:[first] 70% [second] 30% [last];
  grid-template-rows: [r0] min-content [r1] min-content [r2] min-content [r3] min-content [r4];
}

.column-cell
{
  align-items: center;display: grid;justify-items: center;
}

.grid-divider
{
  border-bottom:1px black solid;
}