JSFiddle - React, Tailwind, and code Playground

HTML

<div class="selector">
    <div class="selector-select">
        <div class="selector-value"></div>
        <a href="#" class="selector-button"></a>
    </div>                
    <ul class="selector-list">
        <li class="selector-item">Toto</li>
        <li class="selector-item">Titi</li>
    </ul>                
</div>

CSS

.selector
{
    width                   : 200px;
}

.selector-select
{
    float: left;
    margin                  : 0;
    padding                 : 0;
    position                : relative;
}

.selector-select, .selector-value
{
    display                 : inline-block;
    height                  : 20px;
}

.selector-select, .selector-list
{
    border-style            : solid;
    border-width            : 1px;
    min-height              : 1px;
}

.selector-value
{
    width                   : 180px;
}

.selector-button
{    
    display                 : inline-block;
    width                   : 20px;
    height                  : 100%;
    background-color        : blue;
    position                : absolute;
    right                   : 0;
    top                     : 0;
}

.selector-list
{
    width                   : 170px;
    list-style-type         : none;
    margin                  : 0;
    padding                 : 0;
}

.selector-item
{
    margin                  : 0;
    padding                 : 0;
} 

.selector-item:hover
{
    background-color        : blue;
}