联系表格不正确 - HTML/CSS

Question

I got it to work the way I wanted once, but cant seem to make it work again. This image shows my desired result, and then what's happening.

https://i.stack.imgur.com/QUCuN.png

Why is this happening?

This is the code that's working for me:

<div class="form">
  <input type="name" name="name" autocomplete="off" required />
  <label for="name" class="label-name"> 
      <span class="content-name"> Name </span>  

And the CSS styling:

.content-name {
  position: absolute;
  bottom: 5px;
  left: 0px;
  transition: all 0.3s ease;
}

.form input:focus + .label-name .content-name,
.form input:valid + .label-name .content-name {
  transform: translateY(-150%);
  color: #5fa8d3;
}

.form input:focus + .label-name::after,
.form input:valid + .label-name::after {
  transform: translateX(0%);
}

Code that isn't working:

<div class="form"> 
    <input type="email" name="email" autocomplete="off" required />
    <label for="name" class="label-email">
        <span class="content-email"> Email </span>
</div>

And the CSS:

.content-email {
  position: absolute;
  bottom: 5px;
  left: 0px;
  transition: all 0.3s ease;
}

.form input:focus + .label-email .content-email,
.form input:valid + .label-email .content-email {
  transform: translateY(-150%);
  color: #5fa8d3;
}

.form input:focus + .label-email::after,
.form input:valid + .label-email::after {
  transform: translateX(0%);
}

Answer 1

I'm not sure why this worked, I changed "email" to "emailaddress" in the div and its working fine now.