JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 600px; background-color: blue;"></div>

    <div class="outer_div">

        <div class="scroll-content-left">
          <div></div>
        </div>
      
        <div class="scroll-content-right">
          <div>
            text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
          </div>
        </div>
    </div>

    <div style="height: 600px; background-color: yellow;"></div>

CSS

.outer_div{
  display: flex;
  position: relative;
  height:600px;
  overflow-y: scroll;
  width:100%;
}

.scroll-content-left {
  position: sticky;
  flex: 1 0 65%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-content-left > div{
  height: 200px;
  width: 400px;
  background-color: black;
}

.scroll-content-right {
  position: relative;
  height:100%;
  right:0;
  flex: 1 0 35%;
}