JSFiddle - React, Tailwind, and code Playground

HTML

<form name="form22">
    <div class="form-input">
        <label>Your name:</label>
        <input type="text" id="firstname" onblur="checkInput(this);" onkeyup="checkInput(this);">
        <span class="error-box" id="firstnameError"></span>
    </div>

    <div class="form-input">
        <label>Your surname:</label>
        <input type ="text" id="surname" onblur="checkInput(this);" onkeyup="checkInput(this);">
        <span class="error-box" id="surnameError"></span>
    </div>
</form>

CSS

body {
    font-family: sans-serif;
    font-size: 12px;
}

.error-box {
    color: red;
    margin-left: 10px;
}

.form-input {
    margin: 20px 0;
    padding-bottom: 10px;
}

.form-input label {
    float: left;
    width: 85px;
    height: 21px;
    line-height: 12px/18px;
    vertical-align: middle;
}

JavaScript

function checkInput(elem) {
    var inputValue = elem.value,
        errorBox = document.getElementById(elem.id + 'Error');
    
    if (inputValue.toString().length > 3 && inputValue.toString().length < 35) {
        errorBox.innerHTML = "";
    } else {
        errorBox.innerHTML="Your " + elem.id + " should be more than 3 and less than 35 characters";
    }
}