JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
        <div class="left">
          <div class="top"></div>
          <div class="bottom">
            <ul>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
              <li>asd</li>
            </ul>
          </div>
        </div>
        <div class="right"></div>
      </div>

CSS

.test {
  border: 1px solid red;
  height: 400px;
  display: table;
  width: 100%;
}
.test .left {
  display: table-cell;
  border: 1px solid red;
  width: 50%;
}
.test .left  .top {
  border: 1px solid blue;
  width: 100%;
  height: 100px;
}
.test .left .bottom {
  border: 1px solid blue;
  width: 100%;
  max-height: 100%;
  overflow-y: scroll;
}
.test .right {
  display: table-cell;
  width: 50%;
}