JSFiddle - React, Tailwind, and code Playground

HTML

<select class="squareDropdown" id="da" name="da"><option value="AND">☼&nbsp; AND</option>
<option value="EXCEPT">☺&nbsp; EXCEPT</option>
<option value="OR">☻&nbsp; OR</option></select>
              <input class="textArea" id="d" name="d" placeholder="d" type="text" />
            </div>

CSS

body {
    font-family: sans-serif;
}

.squareDropdown{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
    
        
        
        width: 20px; /*Width of select dropdown to give space for arrow image*/
        /*
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        /*text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
        
        font-family: 'Arial, Sans-Serif';
        font-size:14px;
        background: #bfa75e;
        color:white;
        float:left;
        position:relative;
        
        height: 22px;
         line-height: 22px;
        //vertical-align: top;
    }