Trying to vertically align two floated divs in a container div - css

Question

I'm attempting to float two divs next to each other below a headline. I have tried inline-block, but the only luck I have had is making the container div display: table, and child divs as display: table-cell. I am able to align the two divs using this method, but now I have a large margin or extra padding above the "table cells." Any solution to remove extra margin/padding between the headline and child divs?
If there is a solution to not using display: table and display: table-cell, I would greatly appreciate as I only defaulted to this, because I was unable to get the floats or inline-block to vertically align with each other.
http://jsfiddle.net/jasonniebauer/GRS2k/
HTML
<div id="owner_headline">
<h3>
Owner/Officer Information
</h3>
<p>
Second Owner/Officer (optional)
</p>
</div>
<div id="owner_info">
<div id="owner_info1">
<label for="owner_name">
Name
</label>
<input type="text" id="owner_name" placeholder="Name"/>
<label for="home_address">
Home Address
</label>
<input type="text" id="home_address" placeholder="Address"/>
<label for="owner_city">
City
</label>
<input type="text" id="owner_city" placeholder="City"/>
<label for="owner_state">
State
</label>
<input type="text" id="owner_state" placeholder="State"/>
<label for="owner_zip">
Zip
</label>
<input type="text" id="owner_zip" placeholder="Zip"/>
<label for="owner_phone">
Phone
</label>
<input type="text" id="owner_phone" placeholder="Phone"/>
<label for="ownership">
Ownership
</label>
<input type="text" id="ownership" placeholder="Percentage"/>
<label>
%
</label>
<label for="ssn">
SSN
</label>
<input type="text" id="ssn" placeholder="XXX-XX-XXXX">
</div>
<div id="owner_info2">
<label for="owner_name2">
Name
</label>
<input type="text" id="owner_name2" placeholder="Name"/>
<label for="home_address2">
Home Address
</label>
<input type="text" id="home_address2" placeholder="Address"/>
<label for="owner_city2">
City
</label>
<input type="text" id="owner_city2" placeholder="City"/>
<label for="owner_state2">
State
</label>
<input type="text" id="owner_state2" placeholder="State"/>
<label for="owner_zip2">
Zip
</label>
<input type="text" id="owner_zip2" placeholder="Zip"/>
<label for="owner_phone2">
Phone
</label>
<input type="text" id="owner_phone2" placeholder="Phone"/>
<label for="ownership2">
Ownership
</label>
<input type="text" id="ownership2" placeholder="Percentage"/>
<label>
%
</label>
<label for="ssn">
SSN
</label>
<input type="text" id="ssn2" placeholder="XXX-XX-XXXX">
</div>
</div>
Css
#owner_headline {
background-color: #000B84;
}
#owner_headline h3 {
background-color: #000B84;
padding-left: 7rem;
padding-top: .5rem;
padding-bottom: .5rem;
font-family: "Bank Gothic", serif;
font-size: 24px;
display: inline-block;
color: #FFFFFF;
}
#owner_headline p {
font-family: Arial, sans-serif;
font-style: italic;
font-size: 17px;
font-weight: bold;
display: inline-block;
padding-top: 0;
padding-bottom: 0;
float: right;
padding-right: .1rem;
padding-top: .25rem;
margin-right: 1rem;
color: #FFFFFF;
}
#owner_info {
width: 912px;
display: table;
}
#owner_info1 {
width: 446px;
display: inline-block;
border: 1px solid black;
float: left;
display: table-cell;
}
#owner_info2 {
display: table-cell;
}
#owner_info1 label,
#owner_info2 label {
font-size: 14px;
}
#owner_info1 input,
#owner_info2 input {
display: inline-block;
margin-bottom: 1rem;
}
#owner_info2 {
margin-left: 1rem;
width: 446px;
display: inline-block;
border: 1px solid black;
float: left;
}
#owner_info1 input:nth-of-type(1),
#owner_info2 input:nth-of-type(1) {
width: 400px;
}
#owner_info1 input:nth-of-type(2),
#owner_info2 input:nth-of-type(2) {
width: 344px;
}
#owner_info1 input:nth-of-type(3),
#owner_info2 input:nth-of-type(3) {
width: 169px;
}
#owner_info1 input:nth-of-type(4),
#owner_info2 input:nth-of-type(4) {
width: 184px;
}
#owner_info1 label:nth-of-type(4),
#owner_info1 label:nth-of-type(6),
#owner_info1 label:nth-of-type(9),
#owner_info2 label:nth-of-type(4),
#owner_info2 label:nth-of-type(6),
#owner_info2 label:nth-of-type(9) {
margin-left: 1rem;
}
#owner_info1 input:nth-of-type(5),
#owner_info2 input:nth-of-type(5) {
width: 173px;
}
#owner_info1 input:nth-of-type(6),
#owner_info2 input:nth-of-type(6) {
width: 176px;
}
#owner_info1 input:nth-of-type(7),
#owner_info2 input:nth-of-type(7) {
width: 108px;
}
#owner_info1 input:nth-of-type(8),
#owner_info2 input:nth-of-type(8) {
width: 190px;
}

Answer 1

try this:
Html:
<div id="owner_headline">
<div>
<h3> Owner/Officer Information </h3>
<p>
Second Owner/Officer (optional)
</p>
</div>
<span style="clear:both;"></span>
<div id="owner_info1">
<label for="owner_name"> Name </label>
<input type="text" id="owner_name" placeholder="Name"/>
<label for="home_address"> Home Address </label>
<input type="text" id="home_address" placeholder="Address"/>
<label for="owner_city"> City </label>
<input type="text" id="owner_city" placeholder="City"/>
<label for="owner_state"> State </label>
<input type="text" id="owner_state" placeholder="State"/>
<label for="owner_zip"> Zip </label>
<input type="text" id="owner_zip" placeholder="Zip"/>
<label for="owner_phone"> Phone </label>
<input type="text" id="owner_phone" placeholder="Phone"/>
<label for="ownership"> Ownership </label>
<input type="text" id="ownership" placeholder="Percentage"/>
<label> % </label>
<label for="ssn"> SSN </label>
<input type="text" id="ssn" placeholder="XXX-XX-XXXX">
</div>
<span style="clear:both;"></span>
<div id="owner_info2">
<label for="owner_name2"> Name </label>
<input type="text" id="owner_name2" placeholder="Name"/>
<label for="home_address2"> Home Address </label>
<input type="text" id="home_address2" placeholder="Address"/>
<label for="owner_city2"> City </label>
<input type="text" id="owner_city2" placeholder="City"/>
<label for="owner_state2"> State </label>
<input type="text" id="owner_state2" placeholder="State"/>
<label for="owner_zip2"> Zip </label>
<input type="text" id="owner_zip2" placeholder="Zip"/>
<label for="owner_phone2"> Phone </label>
<input type="text" id="owner_phone2" placeholder="Phone"/>
<label for="ownership2"> Ownership </label>
<input type="text" id="ownership2" placeholder="Percentage"/>
<label> % </label>
<label for="ssn"> SSN </label>
<input type="text" id="ssn2" placeholder="XXX-XX-XXXX">
</div>
</div>
This is css:
body {
width: 912px;
}
#owner_headline {
background-color: #000B84;
}
#owner_headline h3 {
margin: 0 80px;
font-family: "Bank Gothic", serif;
font-size: 24px;
display: inline-block;
color: #FFFFFF;
}
#owner_headline p {
margin: 0 65px;
font-family: "Bank Gothic", serif;
font-size: 24px;
font-weight: bold;
display: inline-block;
padding-top: 0;
padding-bottom: 0;
color: #FFFFFF;
}
#owner_info {
width: 912px;
display: table;
}
#owner_info1 {
width: 446px;
display: inline-block;
border: 1px solid black;
float: left;
display: table-cell;
}
#owner_info2 {
display: table-cell;
}
#owner_info1 label, #owner_info2 label {
font-size: 14px;
}
#owner_info1 input, #owner_info2 input {
display: inline-block;
margin-bottom: 1rem;
}
#owner_info2 {
margin-left: 1rem;
width: 446px;
display: inline-block;
border: 1px solid black;
float: left;
}
#owner_info1 input:nth-of-type(1), #owner_info2 input:nth-of-type(1) {
width: 400px;
}
#owner_info1 input:nth-of-type(2), #owner_info2 input:nth-of-type(2) {
width: 344px;
}
#owner_info1 input:nth-of-type(3), #owner_info2 input:nth-of-type(3) {
width: 169px;
}
#owner_info1 input:nth-of-type(4), #owner_info2 input:nth-of-type(4) {
width: 184px;
}
#owner_info1 label:nth-of-type(4), #owner_info1 label:nth-of-type(6), #owner_info1 label:nth-of-type(9), #owner_info2 label:nth-of-type(4), #owner_info2 label:nth-of-type(6), #owner_info2 label:nth-of-type(9) {
margin-left: 1rem;
}
#owner_info1 input:nth-of-type(5), #owner_info2 input:nth-of-type(5) {
width: 173px;
}
#owner_info1 input:nth-of-type(6), #owner_info2 input:nth-of-type(6) {
width: 176px;
}
#owner_info1 input:nth-of-type(7), #owner_info2 input:nth-of-type(7) {
width: 108px;
}
#owner_info1 input:nth-of-type(8), #owner_info2 input:nth-of-type(8) {
width: 190px;
}