<div class="control">
  <input
    type="email"
    id="email"
    class="email-address"
    onblur="getValEmail()"
  />
  <label for="email">Email</label>
</div>
<div class="control box">
  <textarea id="message" onblur="getValMsg()"></textarea>
  <label for="message">message</label>
</div>



function getValEmail() {
  const valEmail = document.getElementById("email");

  valEmail.addEventListener("blur", function () {
    if (valEmail.value) valEmail.parentElement.classList.add("filled");
    else valEmail.parentElement.classList.remove("filled");
  });
}

function getValMsg() {
  const valMsg = document.getElementById("message");

  valMsg.addEventListener("blur", function () {
    if (valMsg.value) valMsg.parentElement.classList.add("filled");
    else valMsg.parentElement.classList.remove("filled");
  });
}


.filled label,
input:focus + label,
textarea:focus + label {
  top: 0;
  font-size: 1.2rem;
}

These are HTML, Javascript and CSS codes in order. What I'm trying to achieve here is that once user writes email address/message, labels that are inside of input/textarea go up. So, when input/textarea are filled up, labels should disappear to the top. It does its job but not responsively. "filled" class is added after a couple of more clicks happen, which means that labels only go up to the top after I click the box again.

Result looks like this.

This is only achieved after a few more clicks in the box.