JSFiddle - React, Tailwind, and code Playground

HTML

<div class="app-grid">
    <div style="grid-area: t;display:none">t</div>
    <div style="grid-area: h;">h</div>
    <div style="grid-area: s;">s</div>
    <div style="grid-area: l;">l</div>
    <div style="grid-area: m;">m</div>
    <div style="grid-area: r;">r</div>
    <div style="grid-area: f;">f</div>
</div>

CSS

.app-grid {
  position:absolute;
  display: grid;
  height: 100%;
  width: 100%;
  grid-template:
    "t t t t" minmax(0px, 40px)
    "h h h h" 40px
    "s l m r" auto
    "s f f f" 57px;
}

.app-grid > div {
  border: 1px solid blue;
  border-radius: 5px;
}