JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">

  <div style="height: 50px; background-color: red;"></div>
  <aside class="sidenav"></aside>
  <div class="main">
    <div class="container">
      <div class="grid">
        <div class="smallDiv">
          <input type="text"><br><br>
          <input type="text"><br><br>
          <input type="text"><br><br>
          <input type="text"><br><br>
          <input type="text"><br><br>
        </div>
        <div class="bigDiv">

        </div>
      </div>
    </div>
  </div>

</div>

CSS

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  display: flex;
}

.smallDiv{
    background-color: green;
    padding: 10px;
}

.bigDiv{
    background-color: blue;
    padding: 10px;
    width: 60vw;
    height: 60vh;
}

.main{
    margin-left: 160px;
    flex: 1 1 auto;
}

.container{
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 20px;
}

.grid{
    justify-content: center !important;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}