JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
    <div class="form-group address">
        <input type="text" id="address" name="address" pattern="^\d+\s[A-z]+\s[A-z]+,\s+[A-z]+,\s+[A-z]{2}\s+\d{5}" />
		<b></b>
        <label for="address" class="form-group__names" id="invalid">Address</label>
    </div>
</div>

CSS

.form-group input:invalid+b:before {
    content: "Form is invalid";
    color: red;
}

input[type="text"]:invalid~label {
    color: red;
}

.address {
	position: relative;
	padding-left: 100px;
}

.address label {
	position: absolute;
	left: 0;
	line-height: 30px;
}