JSFiddle - React, Tailwind, and code Playground

HTML

<div> <span> <select readonly='readonly' id='sel' name="sometext" style = "width:55px;position: absolute; z-index: -1">
        <option>text1</option>
        <option>text2</option>
        <option>text3</option> 
<option >some very long text </option>         
    </select>
       <div  style="width:500px;height:25px ;background-color:white; z-index: 10" >
           <div id="ddiv" tyle="width:500px;height:25px ;background-color:white; z-index: 15" />
           <select id='dummy' style = "width:65px;position: absolute; z-index: 10">
                 <option style="display:none">text1</option>
        <option style="display:none">text2</option>
        <option style="display:none">text3</option>
                <option style="display:none">some very long text </option>  
           </select>
           </div>
       </span>
</div>

JavaScript

$('#sel').change(function () {
    $('#dummy').val($('#sel').val());
});

$('#ddiv').click(function () {
    open($('#sel'));
}
);


function open(elem) {
    if (document.createEvent) {
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        elem[0].dispatchEvent(e);
    } else if (element.fireEvent) {
        elem[0].fireEvent("onmousedown");
    }
}