How to make focus: and :valid ~ label work when input in span?

https://codepen.io/yarikltv/pen/wvjrZGg here on the left side you can see the result that i want

i have old code:

<style>
.contact-us .user-box input:focus ~ label,
.contact-us .user-box input:valid ~ label{
  top: 0;
  left: 0;
  color: #17BEBE;
  font-size: 14px;
}
</style>

<div class="user-box">
 <input type="text" name="" required="">
 <label>Full name*</label>
</div>

And new code:

<div class="user-box">
  <span class="wpcf7-form-control-wrap" data-name="text-45">
    <input type="text" name="text-45" value="" size="40" class="wpcf7-form-control wpcf7-text" id="fullName" aria-invalid="false">
  </span><br>
  <label for="fullName">Full name*</label>
</div>

How to make the same effect? Maybe use JS addeventlistener or something like this.. So i need somehow replace :focus and :valid ~ label