JSFiddle - React, Tailwind, and code Playground

by peterbenoit

HTML

<div class="searchForm">
    <form>
        <div class="input checkbox"><label class="subset"><input type="checkbox" name="subset" checked="checked" value="value" />checkboxlabel</label></div><div class="input text"><label class="search-box"><input id="searchBoxLocal" type="text" placeholder="SEARCH" name="queryText"><span class="hidden">Search The Site</span></label></div><div class="input submit"><button class="submit"><span class="sprite-16-search-black"></span>?</button></div>
    </form> 
</div>

CSS

.searchForm div { 
    display: inline-block;
}
.hidden {display:none}

.searchForm {
    width:284px;    /* 250 + 30 + 2 + 2 */
    width:484px;    /* + 200 */
}

.searchForm * {
    box-sizing: border-box; 
}

.searchForm input[type="checkbox"] {
    color:blue;
}

.searchForm input[type="text"] {
    border:0;
    height:28px;
    width:250px;
}

.searchForm button.submit {
    background: #fff;
    width: 30px;
    height: 28px;
    border: 0;
}

.searchForm div.input.text,
.searchForm div.input.submit {
    border:0;
}
.searchForm div.input {
    height:32px;
    float:left;    /* watch this, container isn't floating */
}
.searchForm div.input.checkbox {
    width: 200px;
    background: blue;
    padding-left:15px;
    padding-top:7px;
}
.searchForm div.input.text {
    border-left:2px solid blue;
    border-top:2px solid blue;
    border-bottom:2px solid blue;
}

.searchForm div.input.submit {
    border-right:2px solid blue;
    border-top:2px solid blue;
    border-bottom:2px solid blue;    
}