JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <label class="Sortlabel" onclick="runThis()">Sort by</label>
  
  
  
  
  <select id="sel">
             <option></option>
        <option>2</option>
        <option>22</option>
        <option>222</option>
    </select>
    
    
    
</div>

CSS

select
{
    -webkit-appearance: none;
    border:none;
width:70%;
    
}
.container
{
    width:100%;
    float: left;
    width:190px;
    border: 1px solid;
}
.Sortlabel
{
     width:20%;
}

JavaScript

var state = false;

// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function () { 
    var dropdown = document.getElementById('sel');
    showDropdown(dropdown);
};