JSFiddle - React, Tailwind, and code Playground

by abude

HTML

<div class="wrapper">
<form id="masthead-search" class="search-form consolidated-form" action="/results">
    <button class="yt-uix-button yt-uix-button-size-default yt-uix-button-default search-btn-component search-button" type="submit" dir="ltr" id="search-btn" tabindex="2">
        <span class="yt-uix-button-content">Search</span>
    </button>
    <div id="masthead-search-terms" class="masthead-search-terms-border " dir="ltr">
        <label>
            <input id="masthead-search-term" autocomplete="off" autofocus="" class="search-term yt-uix-form-input-bidi" name="search_query" value="" type="text" tabindex="1" placeholder="" title="Search" dir="ltr" spellcheck="false" style="outline: none;">
            </label>
        </div>
</form>
<select class="custom_select">
    <option value="1">TEXT TEXT TEXT1</option>    
    <option value="2">TEXT TEXT TEXT2</option>
    <option value="3">TEXT TEXT TEXT3</option>
    <option value="4">TEXT TEXT TEXT4</option>
    <option value="5">TEXT TEXT TEXT5</option>
    <option value="6">TEXT TEXT TEXT6</option>
</select>
    
    
    
</div>

CSS

#masthead-search {
position: relative;
padding: 0;
margin-top: 3px;
overflow: hidden;
width: 650px;
    float:left;
    padding-right: 50px;
}

#masthead-search .search-btn-component, #masthead-search .search-btn-component .start {
border-left: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
}

#masthead-search .search-btn-component {
float: right;
}

#masthead-search .search-btn-component {
height: 29px;
}

.search-btn-component {
padding: 0;
}

.yt-uix-button-default:hover, .yt-uix-button-text:hover {
border-color: #c6c6c6;
background: #f0f0f0;
box-shadow: 0 1px 0 rgba(0,0,0,0.10);
}


.yt-uix-button:hover {
text-decoration: none;
}


.yt-uix-button-default, .yt-uix-button-default[disabled], .yt-uix-button-default[disabled]:hover, .yt-uix-button-default[disabled]:active, .yt-uix-button-default[disabled]:focus {
border:1px solid #d3d3d3 !important;
border-left:none !important;
background: #f8f8f8;
color: #333;
}

.yt-uix-button {
display: inline-block;
height: 28px;
border: solid 1px transparent;
padding: 0 10px;
outline: 0;
font-weight: bold;
font-size: 11px;
text-decoration: none;
white-space: nowrap;
word-wrap: normal;
line-height: normal;
vertical-align: middle;
cursor: pointer;
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.yt-uix-button-default:before, .yt-uix-button-default .yt-uix-button-icon {
opacity: .5;
filter: alpha(opacity=50);
}




#masthead-search-terms {
position: relative;
overflow: hidden;
height: 29px;
margin: 0 0 2px;
font-size: 14px;
line-height: 30px;
background-color: #fff;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: border-color .2s ease;
-webkit-transition: border-color .2s ease;
transition: border-color .2s ease;
}


.masthead-search-terms-border {
border: 1px solid #ccc;
box-shadow: inset 0 1px 2px #eee;
}


#masthead-search.consolidated-form #masthead-search-terms label {
height: 100%;
}


#masthead-search label...