JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div class="div-A">
A
</div>
<div class="wrapper">
  <div class="div-B">B</div>
  <div class="div-C">C</div>
  <div class="div-D">D</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-areas: '. C' 'D B';
  grid-template-columns: 66% 1fr;
  position: relative;
}

.div-A {
  background: red;
  position: absolute;
  width: 66%;
}

.div-B {
  background: blue;
  grid-area: B;
}

.div-C {
  background: green;
  grid-area: C;
}

.div-D {
  background: orange;
  grid-area: D;
}