JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <nav>
    <p>
      A flexbox solution with fixed sidebar and scrolling content
    </p>
    <p>
      Fiddle by <a href="https://c0derabbit.github.io">c0derabbit</a>
    </p>
    <p>
      Text:<br />
      <a href="http://www.bobrosslipsum.com/" target="_blank">
        Bob Ross Lipsum
       </a>
    </p>
  </nav>
  <div class="main-wrapper">
    <main>
      <h2>
        Clouds are free
      </h2>
      <p>Any little thing can be your friend if you let it be. This is your creation - and it's just as unique and special as you are. God gave you this gift of imagination. Use it. Everyone wants to enjoy the good parts - but you have to build the framework
        first.
      </p>

      <p>The first step to doing anything is to believe you can do it. See it finished in your mind before you ever start. Talk to trees, look at the birds. Whatever it takes. We're trying to teach you a technique here and how to use it. Decide where your
        cloud lives. Maybe he lives right in here.</p>

      <p>Just go back and put one little more happy tree in there. Take your time. Speed will come later. You can't make a mistake. Anything that happens you can learn to use - and make something beautiful out of it.</p>

      <p>You have to allow the paint to break to make it beautiful. Even the worst thing we can do here is good.</p>

      <p>Let your heart take you to wherever you want to be. A tree needs to be your friend if you're going to paint him.</p>

      <p>You need the dark in order to show the light. We'll lay all these little funky little things in there. It just happens - whether or not you worried about it or tried to plan it. Isn't that fantastic that you can create an almighty tree that fast?</p>

      <p>Now, we're going to fluff this cloud. That's why I paint - because I can create the kind of world I want - and I can make this world as happy as I want it.</p>

      <p>Put light against light - you have nothing. Put dark against...

CSS

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  font: 15px 'Helvetica', sans-serif;
  display: flex;
}

nav {
  height: 100vh;
  box-sizing: border-box;
  min-width: 200px;
  padding: 1.1em 1em 1em 4em;
  background: #334;
  color: white;
}

.main-wrapper {
  height: 100vh;
  overflow: scroll;
  background: #f0f0f0;
  padding: 2em;
}

main {
  width: 90%;
  padding: 1em 2em;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 6px #ccc;
}

a {
  color: white;
}