JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="my-grid">
  <div class="item-a"></div>
  <div class="item-b">
  
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 5px;
}

.my-grid {
  background: khaki;
  display: grid;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
  width: calc(100vw - 10px);
  height: calc(100vh - 10px);
}

.item-a {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 0;
  grid-row-end: 2;
  background: green;
}
.item-b {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 0;
  grid-row-end: 1;
  background: red;
}