JSFiddle - React, Tailwind, and code Playground

HTML

<div>

  <div class="main">
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
  </div>

  <div class="side">
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
  </div>

</div>

CSS

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
div {
    display: flex;
    height: 100vh;
}
.main, .side {
    background: pink;
    width: 50%;
    margin: 10px;
    padding: 15px;
}
.main {
    height: 1000px;
}
.side {
    overflow-y: scroll;
    height: 200px;
}
ul {
    width: 100%;
}
li {
    background: red;
    margin: 10px;
    text-align: center;
    height: 500px;
}