JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
<select class="dropdown">
        <option value="&gt;">&gt;</option>
        <option value="&lt;">&lt;</option>
        <option value="&gt;=">&ge;</option>
        <option value="&lt;=">&le;</option>
        <option value="==">&#61;</option>
        <option value="!=">&ne;</option>
</select><div class="overlay-arrow">&#9660;</div>
</div>

CSS

select.dropdown {
     -webkit-appearance: none;       
     -moz-appearance: none;    
     appearance: none;    
     background-position: 22px 3px;                
     background-size: 13px 13px; 
     width: 40px;
    height: 20px;
    margin-left: 4px;
    position: absolute;
    cursor: pointer;
    
}

.overlay-arrow {
    font-size: 9px;
    color: red;
    position: absolute;
    right: 0px;
    top : 10px;
    cursor: default;
    line-height: 1px;

}

.parent {
    position: relative;
    width: 40px;
    height: 20px;
    float: left;
    margin: 0px;
    padding: 0px;
}