JSFiddle - React, Tailwind, and code Playground

by Nic Fontaine

HTML

<section>
  <div class="one">
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas finibus mauris eu gravida. Nunc convallis eget tellus a auctor.</p>
      <p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer cursus porttitor eros facilisis pretium.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas finibus mauris eu gravida. Nunc convallis eget tellus a auctor.</p>
      <p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer cursus porttitor eros facilisis pretium.</p>
    </div>
  </div>
  <div class="two">
    <div class="top">
      <p>Orci varius natoque penatibus et magnis dis parturient montes.</p>
    </div>
    <div class="inner">
      <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas finibus mauris eu gravida. Nunc convallis eget tellus a auctor.</p>
      <p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer cursus porttitor eros facilisis pretium.</p>
      <p>Sed interdum id turpis at placerat. Quisque a enim et odio luctus tincidunt. Maecenas vel massa ligula. Quisque diam libero, dictum vel consequat vitae, pretium nec urna.</p>
      <p>Ut pretium elit posuere ex laoreet, in fermentum quam ornare. Aliquam in volutpat massa, eget ultrices risus. Duis cursus erat facilisis aliquet consequat.</p>
      <p>Etiam interdum vulputate facilisis. Pellentesque vel lobortis magna, eu dictum magna. Curabitur erat justo, rutrum vel feugiat eu, semper eget erat.</p>
      </div>
    </div>
  </div>
</section>

CSS

section {
  display: flex;
  background: #ccc;
  min-height: 0;
  height: auto;
  overflow-y: hidden;
  position: relative;
}

.one {
  flex-grow: 0;
  margin-right: 200px;
}

.two {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 200px;
  height: auto;
}

.two .inner {
  position: relative;
  overflow-y: auto;
}