For this to work we need a few things:
<style>
input:focus~.floating-label,
input:not(:focus):valid~.floating-label,
input[type=email]:not(:placeholder-shown)~.floating-label {
bottom: 35px;
font-size: 11px;
}
.input-text:focus {
outline: none;
}
</style>
Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...