JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#">
    <fieldset>
        <legend>Some legend here</legend>
        <div class="formfield">
            <input type="text" required="required" placeholder="Name" id="name" />
            <label for="name">Name</label>
        </div>
        <div class="formfield">
            <input type="email" required="required" placeholder="Email" id="email" />
            <label for="email">Email</label>
        </div>
    </fieldset>
</form>

CSS

input:focus {
    padding-right: 30%;
}
.formfield {
    position: relative;
}
label {
    width: 30%;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}
input {
    box-sizing: border-box;
    /*box-sizing htc shim as needed*/
    width: 100%;
    padding: 0.4em 0.8em;
}
input:focus + label {
    right: 1em;
    top: 0.1em;
    max-width: 25%;
    padding: 0.4em;
    visibility: visible;
    opacity: 1;
    /*etc*/
}