Input elements are often used in web development. But using only a placeholder to describe the fields are harmful.
So let's create a floating label with very little code. Check out the code in this CodePen and try out the result.
<input type="text" required/>
input:not(:invalid) + span
<input type="text" placeholder=" "/>
input:not(:placeholder-shown) + span
Also I'm looking forward to the
lh unit in CSS which are coming, so I don't have to specify the line-height.
But, remember that floating labels are problematic, as this has some of the drawbacks mentioned in that article.