JSFiddle - React, Tailwind, and code Playground

by Daniel Cheung

HTML

<div>
<h1>Header</h1>
<h1>Header</h1>
<h1>Header</h1>
<h1>Header</h1>
<h1>Header</h1>
<h1>Header</h1>
<h1>Header</h1>
</div>
<div class="contents">
  <div class="side">
    <div>
      <h2>Side</h2>
      <h2>Side</h2>
      <h2>Side</h2>
      <h2>Side</h2>
    </div>
  </div>
  <div class="main">
  <h1>Section</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis est sit amet dolor tristique, vel tempor arcu lacinia. Aliquam rhoncus volutpat massa id porttitor. Nullam vel porta tortor. Curabitur sapien lectus, volutpat non luctus eu, efficitur et nunc. Integer tristique sem nec sem pellentesque, id malesuada diam tempus. Praesent tincidunt nunc ac nulla egestas condimentum. Quisque lorem ex, rutrum vitae lobortis ut, ornare vel orci. Aenean nulla enim, interdum sit amet velit quis, elementum finibus velit. Sed posuere sed felis vel elementum. In massa leo, pulvinar vitae nisi ut, pulvinar tempus nisi. Sed non tincidunt massa. Mauris dictum nulla et nisi mattis consequat.
</p>

  <h1>Section</h1>
<p>
Nunc pulvinar nisi est, blandit aliquet leo malesuada sit amet. Nunc nec ullamcorper urna. Sed pellentesque ut sapien quis feugiat. Aliquam ullamcorper lacinia sem, nec pharetra dolor luctus quis. Nam nec neque cursus sapien pharetra ultrices. Morbi feugiat mauris et consequat efficitur. Suspendisse elit nulla, ultrices id aliquet maximus, tempus varius metus. Pellentesque id massa in metus sodales consectetur fringilla et justo. Pellentesque dictum nisl vitae felis volutpat vehicula. Integer non quam eu ante molestie rutrum. Cras sodales eleifend risus id hendrerit. Phasellus id tristique mauris. Curabitur quis ante sed diam ullamcorper tempus vulputate eget tortor. Pellentesque varius ligula enim, quis blandit justo bibendum quis. Morbi at lacinia mi. Nullam sit amet velit malesuada, sollicitudin sapien eu, scelerisque nisl.
</p>

  <h1>Section</h1>
<p>
Etiam consequat nisl sed nisl varius, eget iaculis elit fringilla. Mauris ac turpis id...

CSS

.contents {
  display: flex;
  flex-direction: row;
}

.side > * {
  overflow-y: auto;
  position: sticky;
  top:0;
}

.main {
  flex: 1;
}