JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header"></div>
<div class="content">
  <div class="main">
    <div class="small"></div>
    <div class="small"></div>
    <div class="big"></div>
  </div>
  <div class="sidebar">
    <div class="block"></div>
    <div class="block"></div>
  </div>  
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
}
.header {
  width: 80%;
  margin: 0 auto;
}
.content {width: 100%;}
.header {
  height: 50px;
  background-color: red;
}
.main, .sidebar, .small, .big {
  margin: 1%;
  display: inline-block;
  text-align: center;
  vertical-align: top;
}
.main {
  width: 56%;
  height: 300px;
  background-color: green;
}
.sidebar {
  width: 39%;
  height: 300px;
  background-color: yellow;
}
.small {
  width: 46%;
  height: 140px;
  background-color: gray;
}
.big {
  width: 96%;
  height: 140px;
  background-color: gray;
}
.block {
  margin: 2% auto;
  width: 96%;
  height: 140px;
  background-color: darkblue;
}
@media (max-width: 480px) {
  .main, .sidebar {
    width: 96%;
    display: block;
  }  
}