JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- just for testing IGNORE -->
<div class="push"></div>
<!-- just for testing IGNORE -->


<input type="text" list="browsers" value="Something">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

<script>
  
    function makeDataList(){
        var $input = $(document.createElement('input'));
        var $list = $(document.createElement('select'));
        var options = [''];
        var $datalist = $('input[list]');
        var defaultValue = $('input[list]').val();
        $input.val(defaultValue);
        options.push(defaultValue + ' - scalable');
        
        // Get options
        $('datalist option').each(function(indx, val){
          options.push(val.value);
        });
        
        $input.addClass('data-list-txt form-control');
        $list.addClass('data-list form-control');
        $input.click('click', function () {
            this.select();
        });
    
        $list.change(function(){
          $input.val($(this).val());
          $(this)[0].selectedIndex = 0;
        });
          
        // Populate the list of options
        $.each(options, function (i, item) {
            $list.append($('<option>', { 
                value: item,
                text: item
            }));
        });
        // Set display:none on the first (empty) option
        $list.find('option:first').css('display', 'none');  
        $datalist.hide();
        $input.insertAfter($datalist);
        $list.insertAfter($input);
    }
    
    
    (function(){
        makeDataList();
    }());
</script>

CSS

.data-list-txt {
    min-width: 90%;
}
.data-list {
    margin-top: -34px;
    cursor: pointer;
}
/* testing IGNORE*/
 .push {
    margin-top: 40px;
}