JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="container" >
  <header>Header</header>
  <aside>Aside</aside>
  <main>Main</main>
  <footer>Footer</footer>
</div>

CSS

body{
  min-height: 300px;
}

.container{
  display: grid;
  color: white;
  grid-template-columns: 200px auto;
  grid-template-rows: 70px auto 70px;
  grid-template-areas: "header header" "aside main" "footer footer";
}

header{
  background-color: darkred;
  grid-area: header;
}

aside{
  background-color: darkgreen;
  grid-area: aside;
}

main{
  background-color: darkorange;
  grid-area: main;
  height: 200px;
}

footer{
  background-color: darkblue;
  grid-area: footer;
}