JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="wrapp">
  <div class="header">
    Header
  </div>
  <div class="content">
    Content
  </div>
  
  <div class="menu">
    Menu
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.wrapp {
  display: grid;
/*grid-template-rows: 100px 150px;
grid-template-columns: 100px 200px 100px;*/
grid-template-rows: 1fr 1fr;
/*grid-template-columns: 1fr 1fr 1fr;*/
grid-template-columns: 1fr 1fr;

/* grid-template: 100px 150px / 100px 200px 100px; */
grid-gap: 8px;

align-items: start;
}

.header {
  background: #00ff00;
grid-column: 2 / -1;
grid-row: 1 / 2;


display: grid;
align-items: end;
}

.menu {
  background: #ff0000;
grid-column: 1 / 2;
grid-row: 1 / 3;

height: 400px;
}

.content {
  background: #0000ff;
grid-column: 2 / -1;
grid-row: 2 / 3;
}