JSFiddle - React, Tailwind, and code Playground

by NicoZZZ

HTML

<html>
<body>

  <div class='container-parent'>
    <div class='side-container on-the-left'>
      <div class='container-child'>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <!-- After this point you should scroll to see "more text -->
        <p>More text</p>
        <p>More text</p>
        <p>More text</p>
      </div>
    </div>
    <div class='side-container on-the-right'>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>

</body>
</html>

CSS

.container-parent {
  display: flex;
  flex-direction: row;
  background: pink;
}

.side-container {
  width: 50%;
}

.on-the-left {
  background: lightblue;
  position: relative;
  overflow-y: scroll;
}

.on-the-right {
  background: lightgreen;
}

.container-child {
  position: absolute;
}