JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="header">header</div>
    <div class="main">
      <div class="sidebar">sidebar</div>
      <div class="content">content</div>
    </div>
  </div>

CSS

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.header {
    width: 100%;
    height: 5%;
    background-color: #000;
}   

.main {
    display: flex;
    flex-grow: 1;
    width: 100%;
}
.sidebar {
    width: 15%;
    background-color: red;
}
.content {
    width: 85%;
    background-color: blue;
}