JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <div class="container">
    <div class="logo">
      <img src="logo.png" height="90" width="280">
    </div>
    <nav>
      <ul>
        <li> <a href="#">Our Top Picks</a></li>
        <li><a href="#">Wall of Shame</a></li>
        <li><a href="#">Movies</a></li>
        <li><a href="#">Tv Shows</a></li>
      </ul>
    </nav>
  </div>
</header>

<div id="sidebar">
  <ul>
    <li> <a href="#">Star wars movie review</a></li>
    <li><a href="#">E.T movie review</a></li>
    <li><a href="#">Happy Death Day Movie review</a></li>
    <li><a href="#">Thor ragnorok movie review</a></li>
  </ul>
</div>

<div class="review">
  <h1>Titanic Movie Review 1996</h1>
  <h3>-By Some random guy</h3>
  <div class="thumbnail">
    <img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2020/01/Rose-DeWitt-Bukater-and-Jack.png?q=50&fit=crop&w=767&h=450&dpr=1.5" alt="An Image of Jack holding rose  from behind">
  </div>
  <div class="text-wrapper">
    <p>
      The Titanic is a classic movie filmed in 1996, with jack and rose, it is a classic tradgedy and feautures kate and leonardo da vinci, one is poor, one is rich, the girl has a expensive random amulet that look quite cool i think, yeah, and then the ships
      crashes and they all die! except for rose. And heres a random movie review from somewhere:<br><br> Like a great iron Sphinx on the ocean floor, the Titanic faces still toward the West, interrupted forever on its only voyage. We see it in the
      opening shots of “Titanic,” encrusted with the silt of 85 years; a remote-controlled TV camera snakes its way inside, down corridors and through doorways, showing us staterooms built for millionaires and inherited by crustaceans.<br><br> These shots
      strike precisely the right note; the ship calls from its grave for its story to be told, and if the story is made of showbiz and hype, smoke and mirrors--well, so was the Titanic. She was “the largest moving work of man in all history,” a character
     ...

CSS

* {
  box-sizing: border-box;
}

@font-face {
  src: url(fonts/WaywardSans-Regular.otf);
  font-family: wayward;
}

body {
  margin: 0;
  background: #fff;
  font-family: wayward;
  font-weight: 100;
  height: 100vh;  /* adjustment; https://stackoverflow.com/a/31728799/3597276 */
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
}

header {
  background: #55d6aa;
  flex: 0 0 100%;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px 0;
  margin-left: 30px;
}

nav {
  float: right;
}

nav ul {
  margin-right: 60px;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 100px;
  padding-top: 30px;
  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

h1 {
  margin: 10px;
}

img {
  max-width: 100%;
}

#sidebar {
  flex: 0 0 25%;
  max-width: 250px;
  background-color: #DDD;
  display: flex; /* new */
}

/* new */
#sidebar > ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* new */
#sidebar > ul > li {
  flex: 0 0 100px; /* adjust height as desired */
  display: flex;
  list-style-type: none;
  border-bottom: 1px solid gray;
}

/* new */
#sidebar > ul > li > a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 25px;
}

.review {
  line-height: 29.25px;
  padding-top: 5px;
  text-align: center;
  border-width: 1px;
  margin: 10px;
  padding: 5px;
  word-wrap: break-word;
  flex: 1;
}

.text-wrapper {
  max-width: 800px;
  margin: auto;
}