JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hd">
  <div class="container">
    <div class="ct">
      <div class="logo">
        Logo
      </div>
      <div class="nav">
        <a href="#">one</a>
        <a href="#">two</a>
        <a href="#">three</a>
        <a href="#">four</a>
        <a href="#">five</a>
      </div>
    </div>
  </div>
</div>
<div id="mn">
  <div class="container">
    <div class="main">
      <p>hello</p>
    </div>
    <div class="side">
      <p>hello</p>
    </div> 
  </div> 
</div>

CSS

#hd { 
background: #444;
}

.container { 
  width: 960px; 
  margin: 0 auto; 
  display: grid;
  grid-template-columns: 2fr 1fr; 
  grid-template-areas: "top top"
    "main side"
}

.ct { 
  grid-area: top;
  display: flex; 
  flex-direction: row; 
}

.logo { 
  background: #ddd;
}

.nav { 
  background: #ddf;
  flex-grow:1;
  text-align:right
}

.main {
  background: #ee0099; 
  grid-area: main;
}

.side { 
  background: #efefef; 
  grid-area: side;
}