JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <div class="searchInput" style="postion:relative">
                <select onchange="document.getElementById('category').value = this.options[this.selectedIndex].text">
                    <optgroup>
                        <option>Cat 1</option>
                        <option>Cat 2</option>
                        <option>Cat 3</option>
                    </optgroup>
                </select>
                <input id="category" style="postion:absolute width:300px" placeholder="Choose A Cateogry" value="Choose A Category">
            </div>
        </td>
        <td>
            <div class="searchInput">
                <input type="text" placeholder="Search Query">
            </div>
        </td>
    </tr>
</table>

CSS

div.searchInput input {
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 100%;
}
div.searchInput select {
border:none;
font-size:20px;
padding:0px;
margin:0px;
height:38px;
width:300px;
color:transparent;position:absolute; 
background-color:transparent;
}
div.searchInput optgroup {
	color:black;
	background-color: white;
}

div.searchInput {overflow: hidden;margin:0px;padding:0px;width:300px; border: 1px #000000 solid;}

body {
    font-family:Helvetica Neue,Arial,Helvetica, sans-serif;
    font-size: 16px;
    background: #666;
    background:rgba(9,9,9,0.6);
    }