<label>
  <input type="text"/>
  <span>Name</span>
</label>

label{
  position: relative;
}

input{
  font-size: inherit;
  font-family: inherit;
  line-height: 1.5em;
}

span{
  position: absolute;
  opacity: 0.6;
  top: 0;
  left: 2px;
  cursor: text;
  transition: all 0.5s ease-in-out;
}

input.has-value + span,
input:focus + span{
  opacity: 1;
  transform: translate(-2px, -1.5em);
  font-size: 0.8em;
  cursor: default;
}

html{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 2em;
}

document.querySelector('input').addEventListener('input', e => {
  if(e.target.value){
    e.target.classList.add('has-value')
  }else{
    e.target.classList.remove('has-value')
  }
})