JSFiddle - React, Tailwind, and code Playground

HTML

<!-- the span wrapper around the input has been removed, moving the input to the same DOM tree level. -->

<div class="theInput">
    <input class="wpcf7-text"/>
    <span class="theLabel" id="your-name">Name</span>
</div>

CSS

/* Note the display:inline block needed for the transform to work as well as vendor prefixes */

input.wpcf7-text:focus + span {
            display: inline-block;
  -webkit-transform: translateY(-5px);
      -ms-transform: translateY(-5px);
          transform: translateY(-5px);
}