JSFiddle - React, Tailwind, and code Playground

HTML

<div id="searchBar">
    <div id="searchwrapper">
        <form name="search_input">
            <div id="sBar1" style="display:inline;">
                <select id="search_level" class="selectSearchBar" name="search_level">
                </select>
            </div>
            <div id="sBar2" class="selectSearchBar"></div>
            <div id="sBar3" class="selectSearchBar"></div>tutor in
            <input type=text class="searchbox" id="location" value="Location" />
            <input id="image" type=image src="images/search_icon.png " class="searchbox_submit" name="searchbox_submit" onclick="searchLocations()" value="">
        </form>
    </div>
</div>

CSS

#searchBar {
    width:940px;
    margin: 0px auto;
}
#searchwrapper {
    display: table;
    margin: 0 auto;
    min-width:600px;
    padding-top: 5px;
    background: red;
}
#searchwrapper form {
}
.searchbox {
    border:0px;
    /*important*/
    background-color:white;
    /*important*/
    position:absolute;
    /*important*/
    width:200px;
    height:40px;
    border-radius:9px;
    font-size: inherit;
}
.searchbox_submit {
    border:0px;
    /*important*/
    background-color:transparent;
    /*important*/
    position:absolute;
    /*important*/
}
.selectSearchBar {
    height:40px;
    width:137px;
    display:inline;
    background-image: url('../images/up_down_arrows.png');
    background-position: right center;
    background-repeat:no-repeat;
    margin:3px 1px 0px 0px;
    border-radius:9px;
}
#image {position: absolute; margin-left: 200px;}