JSFiddle - React, Tailwind, and code Playground

HTML

<body class='stop-scrolling'>
    <div class="wrapper">
        <div class="columnLeft">
            <ul>
                <li><a href="#one">ONE</a></li>
                <li><a href="#two">TWO</a></li>
                <li><a href="#three">THREE</a></li>
            </ul>
        </div>
        <div class="columnRight">
            <div class="box" id="one">
                <p>ONEONEONEONEONEONEONEONEONEONE</p>
            </div>
            <div class="box" id="two">
                <p>TWOTWOTWOTWOTWOTWOTWOTWOTWOTWO</p>
            </div>
            <div class="box" id="three">
                <p>THREETHREETHREETHREETHREETHREE</p>
            </div>
        </div>
    </div>
</body>

CSS

body {
            height:3000px;
        }
        .wrapper {
            width:80%;
            margin:300px auto;
        }
        .columnRight {
            float:right;
            overflow:hidden;
            width:49%;
            height:300px;
            border:1px solid #000;
        }
        .columnLeft {
            float:right;
            width:49%;
            height:300px;
            border:1px solid #000;
        }
        .box {
            float:left;
            width:100%;
            height:300px;
        }
.stop-scrolling {
  height: 100%;
  overflow: hidden;
}