I fixed your code a little and made some CSS, here's a FIDDLE
<form name="loan-form" class="loan-form" action="#">
<div class="required-notice">
<span class="required-star">*</span>= Required Field
</div>
<div class="loan-form-body">
<label>First Name:<span class="required-star">*</span></label>
<input type="text" name="FirstName" id="firstname" class="validate required" />
<label>Email Address:<span class="required-star">*</span></label>
<input type="text" name="EmailAddress" id="emailaddress" class="validate required" />
<label>Address:<span class="required-star">*</span></label>
<input type="text" name="HomeAddress" id="HomeAddress" class="validate required" />
<label>Last Name:<span class="required-star">*</span></label>
<input type="text" name="LastName" id="lastname" />
<label>Work Phone:</label>
<input type="text" name="DaytimePhone" id="daytimephone" />
<input type="submit" onclick="return validate();" class="button" data-form-type="submit" value="Get An Instant Report" />
</div>
</form>
.loan-form {
width: 400px;
padding: 10px;
font-family: Sans-serif;
font-size: 16px;
border: 1px solid #ddd;
}
.loan-form label {
float: left;
clear: left;
width: 150px;
}
.loan-form input[type="text"] {
float: left;
width: 200px;
margin: 0 0 12px;
padding: 2px 4px;
border: 1px solid #ddd;
outline: none;
transition: box-shadow 0.2s ease-in-out;
-moz-transition: box-shadow 0.2s ease-in-out;
-webkit-transition: box-shadow 0.2s ease-in-out;
}
.loan-form input[type="text"]:focus {
box-shadow: 0 0 3px 0 #333;
-moz-box-shadow: 0 0 3px 0 #333;
-webkit-box-shadow: 0 0 3px 0 #333;
}
.loan-form input[type="submit"] {
display: block;
width: 160px;
height: 26px;
margin: 0 auto;
}
.required-notice {
padding: 7px;
margin: 0 0 15px;
}
.required-star {
vertical-align: top;
margin: 0 3px;
font-size: 12px;
color: red;
}
just finish styling by you wish.