JSFiddle - React, Tailwind, and code Playground

HTML

<div id="emulating_variable_width">
   <form id="srxForm" method="post">
         <div id="qsrxSearchbar"> 
             <button id="btnSearch">Search</button>             
             <label id="scope"> Person Name </label>
             <span><input type="text" id="theq" title="Search" /></span>
          </div>
    </form> 
</div>

CSS

#qsrxSearchbar{
    width: 500px;
    height: 100px;
    overflow: hidden;
    background-color: yellow;
}
#qsrxSearchbar input {
    width: 100%
}
#qsrxSearchbar label {
    float: left
}
#qsrxSearchbar span {
    display: block;
    overflow: hidden;
    padding: 0 5px
}
#qsrxSearchbar button {
    float: right
}
#qsrxSearchbar input, .formLine button { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

/*#emulating_variable_width{
    width:500px;
    height:100px;
    overflow: hidden;
    background-color:yellow;
}
input {
    width:100%;
    float:left;
    font-size: 17px;
}
#scope{
    float:left;
}
button{
    float:right;
}
input, button {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}*/