JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">Lorem Ipsum</div>
<div class="menu">Lorem Ipsum</div>
<div class="main">Lorem Ipsum</div>
<aside class="aside">
<div class="panel1">Panel 1</div>
<div class="panel2">Panel 2</div>
Lorem Ipsum
</aside>

CSS

body{
  padding: 0;
  margin: 0;
}

.header {
  background-color: blue;
  width: 100%;
  min-height: 200px;
}

.menu {
  background-color: gray;
  width: 100%;
  min-height: 100px;
}

.main {
  background-color: yellow;
  width: 100%;
  min-height: 100vh;
}

.aside {
  background-color: orange;
  width: 100%;
  min-height: 100vh;
}

.panel1 {
  background-color: red;
  width: 100%;
  min-height: 100px;
}

.panel2 {
  background-color: purple;
  width: 100%;
  min-height: 100px;
}

@media (min-width: 400px) {
  .main {
    width: 60%;
    float: left;
  }
  
  .aside {
    float: left;
    width: 40%;
  }
}