Frontend Mentor - Base Apparel coming soon page

I used the pseudo css class :invalid to display the email error message

<div class="form-group">
  <input type="email" placeholder="Email Address"/>
  <button type="submit" class="btn">
    <img src="images/icon-arrow.svg"/>
  </button>
  <span class="error-message">Please provide a valid email</span>
</div>

.error-message {
    visibility: hidden;
    font-weight: 300;
    margin-left: 1rem;
    margin-top: 1rem;
    color: hsl(var(--soft-red));
}
input:invalid ~ .error-message {
    visibility: visible;
}