Input forms not aligning correctly in Safari - html

Question

I am currently working on a page Here
I am trying to style the form to be aligned as it is displayed in chrome.
I am sure my way of doing this is out of the park wrong but my styling is working in everything but safari and I cannot figure out why
This is the current code I am using....
<div>
<div>
<br />
<div class="required-notice">
<span class="required-star">*</span><span> = Required Field</span>
</div>
<div class="loan-form-body">
<div>
<span>First Name:</span><span class="required-star">*</span>
</div>
<div>
<input type="text" name="FirstName" id="firstname" class="validate required" style="width: 200px;" />
</div>
<div>
<span>Email Address:</span><span class="required-star">*</span>
</div>
<div>
<input type="text" name="EmailAddress" id="emailaddress" class="validate required" style="width: 200px;" />
</div>
<div>
<span>Address:</span><span class="required-star">*</span>
</div>
<div>
<input type="text" name="HomeAddress" id="HomeAddress" class="validate required" style="width: 430px;" />
</div>
<div>
<div>
<span style="text-align: left; position: absolute; margin-left: 40%; margin-top:-21%;">
Last Name:
<span class="required-star">*</span>
</span>
</div>
<div>
<input type="text" name="LastName" id="lastname" style="width: 200px; position: absolute; margin-left: 40%; margin-top: -18%;" />
</div>
<div style="position: absolute; margin-left: 40%; margin-top: -14%;">
Work Phone:
</div>
<div>
<input type="text" name="DaytimePhone" id="daytimephone" style="width: 200px; position: absolute; margin-left: 40%; margin-top: -10.7%;" />
</div>
</div>
<div class="submit">
<input type="submit" style="width: auto; outline: none; -webkit-appearance: none;" onclick="return validate();" class="button" data-form-type="submit" value="Get An Instant Report" />
</div>
Pardon the messy code.

Answer 1

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.