JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="search-container">
    <span>Size</span>
    <div class="search-box">
        <div class="size-container">
        <select name="size" id="size">
            <option value="0">ANY</option>
            <option value="100">100-200</option>
            <option value="200">200-300</option>
            <option value="300">300-400</option>
            <option value="400">400-500</option>
            <option value="500">500-600</option>
            <option value="600">600+</option>
        </select>
        </div>
    </div><span style="padding-left:20px;">Bedrooms</span>
    <div class="search-box" style="left:6px; width:98px;">
        <div class="bedrooms-container">
        <select name="bedrooms" style="width:103px;">
            <option value="0">ANY</option>
            <option value="1">ONE</option>
            <option value="2">TWO</option>
            <option value="3">THREE</option>
            <option value="4">FOUR</option>
            <option value="5">FIVE</option>
            <option value="6">SIX</option>
            <option value="7">SEVEN+</option>
        </select>
        </div>
    </div>
</div>

CSS

.search-container {
    width: 925px;
    height: 63px;
    background-color: #e1e1e1;
    position: relative;
}

.search-box select {
    width: 137px;
    height: 50px;
    border: 0;
    background-color: transparent;
    color: #4d4d4d;
    font-family: 'oswaldregular', Calibri;
    text-transform: uppercase;    
    font-size: 22px;
    padding: 10px 0 5px 6px;
    cursor:pointer;
    /*-webkit-appearance: none;*/
}

.search-box {
    display: inline-block;
    height: 50px;
    padding-top: 7px;
    padding-left: 7px;
    position:relative;
    width:128px;
}

.size-container {
    overflow: hidden;
    width: 116px;
    display: inline-block;
}
.bedrooms-container {
    overflow: hidden;
    width: 86px;
    display: inline-block;
}
.size-container {
    overflow: hidden;
    width: 116px;
    display: inline-block;
    background: url("../images/new_arrow.png") no-repeat right #c8c8c8;
}
.bedrooms-container {
    overflow: hidden;
    width: 86px;
    display: inline-block;
    background: url("../images/new_arrow.png") no-repeat right #c8c8c8;
}

.search-container span {
    line-height: 69px;
    padding-left: 12px;
    vertical-align: top;    
    font-family: 'oswaldregular',Calibri;
    text-transform: uppercase;    
    color: #000000;
    font-size: 22px;
}