Move placeholder to Top inside the input on focus-v2

Move placeholder to Top inside the input on focus another version

by sundaramkumar

HTML

<div>
  email: <input type="text" class="inputText" required/>  
  <span class="floating-label">Your email address</span>
</div>
<div>
Name:  <input type="text" class="inputText" required/>
  <span class="floating-label">Your Name</span>  
</div>

CSS

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: 8px;
  bottom: 10px;
  left: 50px;
  font-size: 11px;
  opacity: 1;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 50px;
  top: 18px;
  transition: 0.2s ease all;
}
div {
  position: relative; /*  make label relate to div  */
  padding-top: 10px;  /*  make space for label      */
}