JSFiddle - React, Tailwind, and code Playground
HTML
<p>Looks fine on Chrome, hugly on FF</p>
<div class="wrapper">
<div class="line">
<div class="square"></div>
<input class="bug">
<input class="bug">
</div>
</div>
CSS
*{ box-sizing : border-box; }
.wrapper { width: 300px; border: 1px solid; padding: 5px; }
.line { display: flex; border: 1px solid; }
.square { min-width: 25px; height: 25px; background: red; }
.bug { width: 100%; background: green; border: none; border-left: 1px solid; padding: 0; }