JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div id="grid">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
  <div id="E">E</div>
</div>

CSS

#grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
}

#A {
  grid-column: 1 / span 2;
  grid-row: 2;
  align-self: end;
  background: red;
  height: 50px;
}

#B {
  grid-column: 1;
  grid-row: 1;
  z-index: 10;
  background: cyan;
  height: 50px;
}

#C {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-left: -20px;
  background: yellow;
  height: 50px;
}

#D {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  background: lightgreen;
  height: 50px;
}

#E {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  z-index: 5;
  justify-self: center;
  align-self: center;
  background: lime;
  height: 50px;
}