JSFiddle - React, Tailwind, and code Playground

HTML

<div class="forms">
    <form action="">
        <fieldset>
            <legend>Fieldset</legend>
            <input type="text"/><div></div>
            <input type="text"/><div></div>
            <input type="text"/><div></div>
        </fieldset>
        <fieldset>
            <legend>Fieldset</legend>
            <input type="text"/><div></div>
            <input type="text"/><div></div>
            <input type="text"/><div></div>
        </fieldset>
    </form>
</div>

CSS

*,
*:before,
*:after {
    box-sizing: border-box;
}
form,
fieldset { display: inline-block; font-size: 0; margin: 0; border: none; position: relative; }
form { padding: 10px; width: 99%; }
fieldset { padding: 20px 10px 0 10px; width: 49%; }
form:before,
fieldset:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid gainsboro; }
fieldset:first-child { margin-right: 10px; }
fieldset { margin-top: 10px; }
legend { position: absolute; top: -10px; left: 10px; background: white; line-height: 20px; font-size: 16px; z-index: 50; }
input { margin: 0 0 10px 0; width: 100%; position: relative; z-index: 20; border: 1px solid silver; padding: 5px 10px; }
input:focus { border-color: skyblue; outline: none; }
input:focus + div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid skyblue; z-index: 10; }