The css :valid pseudo class only works if the required attribute is present. It’s that :valid rule that slides the label out of the way once text is entered. (:focus will slide it out of the way but once you go to the next input it would slide back over the input if the :valid rule wasn’t present.)
If you want to mimic that behaviour without using the
required attribute then you would need to supplement that behaviour with JS and add/remove a class to the input when text had been entered/cleared and change instances of the :valid rule css to use the new class you added.
You can’t have the sliding away action unless you use the
required attribute or by implementing with JS