JSFiddle - React, Tailwind, and code Playground

HTML

<div class=top>
    <div class=whatever>Random width here...</div>
    <div class=input>
        <input value="Some value">
    </div>
</div>

CSS

.top {
    position: fixed;
    margin: 0;
    padding: 0 0 0 234px;
    top: 0;
    height: 50px;
    width: 100%;
    background: yellow;
    vertical-align: middle;
}

.whatever {
    background: red;
    width: 234px;
    float: left;
    line-height: 50px;
    margin-left:-234px;
}
.input {
    float:left;
    width:100%;
}
.input input {
    background: green;
    width: 100%;
    height: 50px;
    border: 0;
    outline: 0;
    /* you want this if there's any border/padding on the input */
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}