JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    <form>
        <label>Qualquer nome para qualquer tamanho</label>
        <input/>
    </form>
</article>

CSS

* {
    margin: 0;
    padding: 0;
}
article {
    width: 50%;
    background: red;
    height:300px
}
label {
    float: left;
    padding-right: 2%;
    background: green;
}
form {
    width: 100%;
}
input {
    overflow: hidden;
    border: 0;
    background: green;
    font-size: 1em;
    outline: none;
}

JavaScript

var label = document.querySelector('label');
var input = document.querySelector('input');

label.onclick = function () {
    label.style.display = 'none';
    input.focus();
}
input.onblur = function () {
    if(!this.value) label.style.display = 'block';
}