JSFiddle - React, Tailwind, and code Playground

HTML

<div id='test' style="overflow-x:scroll; width:120px; overflow: -moz-scrollbars-horizontal;">
<select id='mySelect' name="mySelect" size="5">
    <option value="1">one two three four five six</option>
    <option value="2">seven eight</option>
    <option value="3">nine ten</option>
    <option value="3">nine ten</option>
    <option value="3">nine ten</option>
    <option value="3">nine ten1111</option>
</select>
<div id="divv" style='font-size: 1px'>&nbsp</div>
</div>

JavaScript

$('#divv').css('width', $('#mySelect').outerWidth());
    $('#mySelect').css('width', $('#test').outerWidth());
    $( "#test" ).scroll(function() {
        $('#mySelect').css('width', $(this).outerWidth() + $(this).scrollLeft());
    });