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:100%;
  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 {
  position: sticky;
  top: 0;
  height: 200px;
  width: 400px;
  background-color: black;
}

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