<p>
  <input type="text">
  <span>name</span>
</p>
p{
  position: relative;
}

p span{
  position: absolute;
  top: 0;
  left: 4px;
  transition: 0.1s;
}


input:focus ~ span{
  transform: translateY(-14px);
  font-size: 14px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.