JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<div class="ui-layout-center"></div>
<div id="north" class="ui-layout-north">
    <select style="width: 250px; opacity:0"></select>
    
</div>

<div id="chosen_select"style="width: 250px; position:fixed; z-index:99999">
        <select id="picker" style="width: 250px">
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
            <option value='4'>4</option>
            <option value='5'>5</option>
            <option value='6'>6</option>
        </select>
    </div>  


<div class="ui-layout-south"></div>
<div class="ui-layout-east"></div>
<div class="ui-layout-west"></div>

CSS

#chosen_select{
    top:10px;
    left:10px;
    
}
.hide{
    display: none;
}

JavaScript

$('#picker').chosen();
$('body').layout(
    { applyDefaultStyles: true }
);

$('.ui-layout-toggler-north').click(function(){
    //alert("OK");
    $('#chosen_select').toggleClass('hide');
});