JSFiddle - React, Tailwind, and code Playground

HTML

<div class="select-wrapper">
<span>Swedish Cars</span>
<select>
   <optgroup class="swe-car" label="Swedish Cars">
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
   </optgroup>
</select> 
</div>

CSS

div{
    position:relative;
}

span{
    font-family:arial;
    font-weight:bold;
    font-size:12px;
      position: absolute;
      background: #fff;
      margin: 3px;
}

select{
    padding-right:22px;
}

JavaScript

$().ready(function(){
    $('.select-wrapper span').click(function(){
        // Open select using span
        open($(this).siblings('select'));
    });    
    
    $('.select-wrapper select').change(function(){
        // Now a selection has been made, we don't need the label
        $(this).siblings('span').hide();
    });
});

// We have to use a bit of trickey to force the select to open
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");
    }
}