JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Short Word</h1>
<section>
        <div>
            <input type="text" placeholder="Search..." />
        </div>
        <div>
            <button>Search</button>
        </div>
</section>


<h1>Long Word</h1>
<section>
        <div>
            <input type="text" placeholder="Search..." />
        </div>
        <div>
            <button>Super Long Word For Search Button</button>
        </div>
</section>

CSS

* { box-sizing: border-box; }

section { width: 100%; display: table; padding: 1em 0 0; }
div { display: table-cell; width: 100%; }
input { width: 100%; padding: .5em 1em; }
button { color: black; padding: .5em 1em; white-space: nowrap; margin: 0 0 0 1em; }