JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="bar">
  <header class="page-container">Website Bar</header>
</nav>
<main class="main-page page-container">
  <nav class="navigator">
    <ul>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
  </nav>
  <article class="content">
    <h1>Title</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod vehicula nunc, quis vulputate est laoreet nec. Etiam feugiat a arcu efficitur maximus. Praesent tempus, leo a luctus dignissim, diam mauris pellentesque libero, ultrices iaculis sapien
      enim et lorem. Maecenas convallis quam elit, vitae euismod mi egestas nec. Praesent ut dapibus augue. Ut fermentum at eros non lobortis. Quisque volutpat nisl non odio vulputate tempor.
    </p>
  </article>
</main>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.bar {
  height: 55px;
  background: #3b3e42;
  color: white;
  width: 100%;
  position: absolute;
  line-height: 55px;
}

.page-container {
  width: 95%;
  max-width: 800px;
  margin: auto;
  position: relative;
}

header.page-container {
  border: 1px dashed white;
  box-sizing: border-box;
}

.main-page {
  padding-top: 60px;
}

.navigator {
  width: 20%;
  position: absolute;
  border: 1px dashed red;
}

.navigator ul {
  list-style: none;
  padding: 0 1em;
}

.content {
  padding-left: 2%;
  width: 77%;
  right: 0;
  position: absolute;
  border: 1px dashed blue;
}