JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<label for="FirstName" class="mktoLabel mktoHasWidth floating-label" style="width: 100px;">First name:</label>  
  <input id="FirstName" name="FirstName" maxlength="255" type="text" class="mktoField mktoTextField mktoHasWidth mktoRequired mktoInvalid inputText" style="width: 150px;">
  
</div>

CSS

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  font-size: 14px;
  transition: 0.2s ease all;
}
input[id='FirstName']:focus + .floating-label
{
    font-size: 11px;
}

JavaScript

var oldSize;
        $('#FirstName').focus(function () {
            oldSize = $("label[for='FirstName']").css('font-size');
            $("label[for='FirstName']").css('font-size', 12);
        });
        $('#FirstName').blur(function () {
            $("label[for='FirstName']").css('font-size', oldSize);
        });