input focus + span?

Question

css

Tell me
, I can’t understand where to write , I’m
already confused, the
essence is this, the span is above the input
, when the focus is on, the span goes up,
but after filling in the field and going to the next one, the span returns back
.

there is a form

<form>
<label><input type="text"/><span>Текст</span></label>
</form>

form label{
  position:relative;	
}
form label span{
  position:absolute;
  left: 10px;
  top:50%;
  transform: translateY(-50%);
  transition: 0.5s top;
}
form input:focus + span {
  top:-30px;
  color:#FFF;
}

form input:focus:invalid + span{
  top:-30px; не срабатывает

}