JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
    <div class="top-nav">           
        <form action="#">
            <select>
                <option value="ten">10</option>
                <option value="twenty">20</option>
                <option value="thirty">30</option>
            </select>   
        </form>     
    </div>
</div>
<br/>
<br/>
<br/>

<br/>
<br/>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="area">          
    <div id="ten">Alot of content goes in here</div>
    <div id="twenty">Alot of content goes in here</div>
    <div id="thirty">Alot of content goes in here</div>
</div>

CSS

td{
    border:1px solid gray;
    /*white-space:nowrap;*/
    max-width: 370px !important;
    word-wrap: break-word;
    padding: 0.25em;
}
td span a.continueAction{
cursor:pointer;
border-left:7px solid green;
border-right:7px solid green;
}

JavaScript

$('.top-nav').children().children('select').bind('change', function () {  
  $("html, body").animate({scrollTop: $('#' + $(this).val()).offset().top}, "slow");
    
    alert($('#' + $(this).val()).html()); 
});