JSFiddle - React, Tailwind, and code Playground

HTML

<div id="appraisals-form" class="contact-form">
	<form role="form" method="post" action="contact-form.php">
		<label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
		<label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
		<label for="email"><span>Phone</span><input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." /></label>


		<label for="art-type" class="wrap"><span class="wrap-lg">Type of Artwork</span><span class="wrap-sm">(i.e. sculpture, painting...)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork."></label>

		<label for="artist" class="wrap"><span class="wrap-lg">Artist Name</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's artist."></label>

		<label for="title" class="wrap"><span class="wrap-lg">Title of Piece</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's title."></label>

		<label for="measurements"><span>Measurements</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your item's measurements." /></label>

		<label for="date" class="wrap"><span class="wrap-lg">Date / Age</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's date / age."></label>

		<label for="condition"><span>Condition</span><textarea name="message" class="textarea-field" required...

CSS

.contact-form {
	margin: 0 auto;
    max-width: 600px;
    position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
	font-size: 20px;
}

.contact-form label {
    display: block;
    margin: 0px 0px 15px 0px;
    text-transform: uppercase; /* New */
}

.contact-form label > span {
    padding-top: 8px;
}

.contact-form label > span, #recaptcha::before {
    width: 100px;
    text-align: right;
    float: left;
	padding-right: 20px;
    content: "";
}

.contact-form input, .contact-form textarea, .contact-form fieldset {
	margin-bottom: 15px;
	padding: 10px;
	border: none;
}

.contact-form input.input-field {
    width: 70%;
    height: 20px;
    font-size: 18px;
}

.contact-form .textarea-field {
	height: 250px;
	margin-bottom: 11px;
}

.contact-form .textarea-field, .g-recaptcha {
	width: 70%;
	font-size: 18px;
	display: inline-block;
}

.contact-form fieldset { /* New */
	font-size: 16px;
}

.contact-form legend { /* New */
	width: 150px;
    text-align: right;
    float: left;
	padding-right: 20px;
    content: "";
	text-transform: uppercase;
}

.contact-form fieldset input { /* New */
	margin-right: 10px;
	text-align: left;
}

.g-recaptcha {
	height: 78px !important;
}

#recaptcha {
	display: block;
    margin: 0px 0px 24px 0px;
}

textarea {
	resize: none;
}

textarea:focus, input:focus {
	outline: 0;
}

input.submit-button {
	background-image: url("../img/submit-button.jpg");
	width: 225px;
	height: 60px;
	border: none;
}


.appraisals .section-title {
	width: 100%;
}

#appraisals-form {
	width: 100%;
	max-width: 700px;
	top: auto;
	transform: none;
}

#appraisals-form label > span {
    width: 150px;
    font-size: 16px
}

#appraisals-form label.wrap {
	position: relative;
	width: 100%;
}

#appraisals-form span.wrap-lg {
	width: 170px;
	padding: 0;
	position:
	relative;
	left: -20px;
}

#appraisals-form span.wrap-sm {
	width: 170px;
	padding: 0;
	position: absolute;
	display:...