JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:478px; width:100px; float:left; border: solid 1px red; font:12px Georgia, Garamond, Serif;overflow:auto;">
            <div class="sss" style="height:478px; width:100px; overflow:hidden;">
                <div class="btn test1">Test1</div>
                <div class="btn test2">Test2</div>
                <div class="btn test3">Test3</div>
                <div class="btn test4">Test4</div>
                <div class="btn test5">Test5</div>
                <div class="btn test6">Test6</div>
                <div class="btn test7">Test7</div>
                <div class="btn test8">Test8</div>
                <div class="btn test9">Test9</div>
                <div class="btn test10">Test10</div>
                <div class="btn test11">Test11</div>
                <div class="btn test12">Test12</div>
                <div class="btn test13">Test13</div>
                <div class="btn test14">Test14</div>
                <div class="btn test15">Test15</div>
                <div class="btn test16">Test16</div>
            </div>
        </div>


        <div class="contWrap">
            
            <div class="row" id="test1">

                Other content1 on the page

            </div>

            <div class = "row" id="test2">

                Other content2 on the page

            </div>
            <div class = "row" id="test3">

                Other content3 on the page

            </div>

            <div class = "row" id="test4">

                Other content4 on the page
            </div>

        </div>

CSS

.contWrap{height:480px; width:300px; overflow: hidden; float:left;}
.row{height:478px; width:298px; font:12px Georgia, Garamond, Serif; float:left; overflow:auto; border:solid 1px red;}
.btn{width:100px; height:35px; line-height: 35px; background:yellow; cursor:pointer; border-bottom:solid 1px black; margin:3px 0;}

JavaScript

$('.sss').animate({
    scrollTop: $(".test5").offset().top
}, 2000);