Floating label

Type something in the input to see how the label is shown up.
<div class="container">
<!-- The input -->
<input placeholder="Placeholder" class="container__input" />
<!-- The label -->
<label class="container__label">Placeholder</label>
</div>
.container {
position: relative;
}
/*
Show the label at desired position when the
placeholder of input isn't shown
*/
.container__input:not(:placeholder-shown) + .container__label {
background: #fff;
transform: translate(0, -50%);
opacity: 1;
}
.container__label {
/* Position the label */
left: 8px;
position: absolute;
top: 0;
/* Hide it by default */
opacity: 0;
transition: all 200ms;
}