JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<fieldset id="fs" class="oflow">
<div class="select">
<input type="text" id="foo" value="" /> &#9660;
</div>
<ul class="options">
<li>un</li>
<li>deux</li>
<li>trois</li>
<li>quatre</li>
<li>cinq</li>
<li>six</li>
</ul>

</div>
</fieldset>
</form>

CSS

.options li { list-style:none;
list-style-position: outside;
 cursor: pointer;
 }

.options li:hover {
  background-color: silver;
}
.oflow {
  border: solid 1px red;
overflow: visible; }
.options{
  display: none;
  margin: 0;
  padding:0;
  border: solid 1px silver;}
#foo { 
 border :0;
 }
 .select {
   border: solid 1px silver;
   display:inline-block;
   }

JavaScript

$ (function(){

$('.select').on('click', function(){
  $(this).next('.options').slideToggle();
})
$('#foo').on('focus', function(){ $(this).blur();})

$('.options>li').on('click', function(){
  selval= $(this).text();
  $('#foo').val( selval );
  $(this).parent('.options').slideToggle();
});

});