<form>
  <div class="flex">
    <input id="email" type="email"><span></span>
    <label for="email">Your Email Address</label>
  </div>
</form>

.flex {
  display: flex;
  flex-flow: wrap
}

label {
  order: -1
}

input[type=email] {
  width: 20em;
  max-width: 90%
}

label::after {
  content: ':';
  padding-right: 0.4em
}

input[type=email]:invalid {
  border: 1px solid red;
  outline: none;
  box-shadow: none
}

input[type=email]:invalid ~ span::before {
  content: 'X';
  font-family: sans-serif;
  font-weight: bold;
  padding: 0.6em
}
input[type=email]:invalid,
input[type=email]:invalid ~ label,
input[type=email]:invalid ~ span::before
{
  color: red
}