JSFiddle - React, Tailwind, and code Playground

HTML

<div class="vp4">
    <div class="wrap">
        <div class="checkbox">
            <label class="subset"><input type="checkbox" name="subset" checked="checked" value="topic">TOPIC ONLY</label>
        </div>
        <div class="wrapper">
            <div class="button">
                <button class="btn-clear">X</button>
                <button class="btn-submit">?</button>
            </div>
            <div class="input">
                <input type="text" placeholder="SEARCH" />
            </div>
        </div>
    </div>
</div>
    <br />
<div class="vp3">
    <div class="wrap">
        <div class="checkbox">
            <label class="subset"><input type="checkbox" name="subset" checked="checked" value="topic">TOPIC ONLY</label>
        </div>
        <div class="wrapper">
            <div class="button">
                <button class="btn-clear">X</button>
                <button class="btn-submit">?</button>
            </div>
            <div class="input">
                <input type="text" placeholder="SEARCH" />
            </div>
        </div>
    </div>
</div>    <br />
<div class="vp2">
    <div class="wrap">
        <div class="checkbox">
            <label class="subset"><input type="checkbox" name="subset" checked="checked" value="topic">TOPIC ONLY</label>
        </div>
        <div class="wrapper">
            <div class="button">
                <button class="btn-clear">X</button>
                <button class="btn-submit">?</button>
            </div>
            <div class="input">
                <input type="text" placeholder="SEARCH" />
            </div>
        </div>
    </div>
</div>    <br />
<div class="vp1">
    <div class="wrap">
        <div class="checkbox">
            <label class="subset"><input type="checkbox" name="subset" checked="checked" value="topic">TOPIC ONLY</label>
        </div>
        <div class="wrapper">
            <div class="button">
                <button class="btn-clear">X</button>
               ...

CSS

:focus {
  outline-color: transparent;
  outline-style: none;
}

input[type="text"]::-ms-clear, 
input[type="text"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;    
}

input[type="text"], button {
    border:0;
}

input[type="text"] {
    width:100%;
    padding:4px 6px;
    height: 22px;
}

button {
    width:30px;   
    height:30px;
    float:left;
    background: #fff;
}

button.btn-submit {
    border-left:2px solid #075290;
    background: #B1DAFB;
}

input[type="checkbox"] {
    margin-right: 5px;
}

.vp4 .wrap {
    width:500px;
}

.vp3 .wrap {
    width: 300px;
}

.vp2 .wrap {
    width:734px;
}

.vp1 .wrap {
    width:100%;
}

.wrapper {
    border:2px solid #075290;
}
.vp4 .wrapper, .vp2 .wrapper {
    margin-left:200px;
}


.checkbox {
    background:#075290;
    height:26px;
    color:#fff;
    padding-top:8px;
    padding-left:15px;
}

.button {
    float: right;
    width:60px;
}

.input {
    margin-right:75px; /* width of the button and the padding */
}

.vp4 .checkbox,
.vp2 .checkbox {
    width:185px;
    float:left;
}

.vp3 .checkbox {
    width:285px;
    clear:right;
}