JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <aside class="sidebar"></aside>
  <div class="wrapper-column">
    <header class="main-header"></header>
    <main class="main-content">
      <section class="content-section">
        <div class="content">
          <ul class="content-list">
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem libero aspernatur voluptatem, voluptate voluptas enim voluptatibus tempore amet expedita excepturi facere, possimus debitis nam earum!</li>
            <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ratione tempore sint! Suscipit rerum facilis consequuntur, sequi aliquam reiciendis, in quia fugiat nostrum, numquam vel.</li>
            <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit porro facilis numquam culpa illum amet minima, delectus accusantium consectetur cumque repellendus id officia laudantium odio!</li>
          </ul>
          <ul class="content-list">
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nam praesentium a hic, molestias ipsam sed nulla, non, quaerat necessitatibus unde. Similique quod illum consequatur.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam quo adipisci iusto accusantium sed laboriosam officiis placeat eaque veniam animi, facere mollitia repudiandae rerum alias.</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. In sint, architecto beatae esse culpa deleniti quaerat hic, blanditiis provident natus quam doloribus voluptatibus similique ea!</li>
          </ul>
          <ul class="content-list">
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa tempore laudantium voluptatem dolor quod harum facilis voluptas consectetur minus, nulla, excepturi illum exercitationem eos ipsum!</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate numquam eveniet debitis, voluptatibus velit, quo aut quos...

CSS

.wrapper {
  display: flex;
  flex-direction: row;
}
.wrapper-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #00f;
}
.main-header {
  position: sticky;
  top: 0;
  height: 70px;
  border: 1px solid #f0f;
  background-color: #fff;
}
.main-content {
  height: 1000px;
  padding: 15px 25px;
  border: 1px solid #000;
}
.sidebar {
  position: sticky;
  top: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  height: 100vh;
  width: 250px;
  border: 1px solid #0ff;
}
.content-section {
  border: 1px solid #b22222;
}
.content {
  padding: 5px;
}
.content-list {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  padding: 7px 20px;
  margin: 0;
  height: 40px;
  border: 1px solid #3cb371;
  list-style: none;
}
.content-list li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}