JSFiddle - React, Tailwind, and code Playground

HTML

Customer:
    <div class="Autocomplete">
        <input type="text" class="CodeField" />
        <div class="Selector">
            <input type="text" class="SmartField" />
            <div class="Arrow"></div> 
            <div class="OptionsListHolder">
                <select class="OptionsList" size="8">
                    <option>opt 1</option>
                    <option>opt 2</option>
                    <option>opt 3</option>
                    <option>opt 4</option>
                    <option>opt 5 - long item text</option>
                </select>
            </div>
        </div>        
    </div>
    <br>
    text to check if the OptionsList is override this text

CSS

.Autocomplete {
    direction: ltr;
}

.Autocomplete, .Autocomplete .Arrow, .Autocomplete .CodeField,
.Autocomplete .SmartField, .Autocomplete .Selector {
    float:left;
}

.Autocomplete .Arrow {
    background-image:url(drop.gif);
    background-position:top right;
    height:17px;
    width:17px;
    cursor:pointer;
}

.Autocomplete .OptionsListHolder {
    height:0px;
    width:0px;
}

.Autocomplete .OptionsList
{
    position:relative;
    z-index:999;
    top:0px;
    right:0px;
    border: 1px solid #888888;
    font-weight: normal;
    font-size: 12px;
    font-family: Arial (Hebrew);
}

.Autocomplete .CodeField
{
    width:40px;
    border: 1px solid #888888;
    height:13px;
}

.Autocomplete .SmartField
{
    width:auto;
    border: 1px solid #888888;
    height:13px;
    font-weight: normal;
    font-size: 12px;
    font-family: Arial (Hebrew);
}