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="name" style="position: relative; width: 100%;">
<span style="width: 24%; padding: 0; position: relative; left: -2%;">Type of Artwork</span>
<span style="width: 24%; padding: 0; position: absolute; left: -2%; bottom: 30%;" class="label-sm">(i.e. sculpture, painting...)</span>
<input style="width: 70%" type="text" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork.">
</label>

							<label for="message"><span>Message</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."></textarea></label>
							<div class="centred-button"><input type="submit" value="" class="submit-button" /></div>			      
						</form>				
					</div>

CSS

.contact-form {
	margin: 0 auto;
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);
    max-width: 600px;
	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 {
	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;
}

.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 span.label-sm {
	display: block;
	font-size: 14px;
	text-transform: none;
}

#appraisals-form input, #appraisals-form textarea {
	background-color: #d7d7d7;
}

#appraisals-form textarea {
	height: 100px;
}

#appraisals-form .centred-button {
	text-align: center;
}