CSS Horizontal alignment with form fields - css

Question

I have looked at every possible answers on this subject and for the life of me, cannot get it done.
On this page http://dev.rpgplan.com/contact-us/ I am trying to line up the top 3 fields like this image http://note.io/13eOJi7
but all I am getting is misaligned fields.

Answer 1

In the page you used <br></br> tag between 3 input fields that cause lineBreak so here is what i change and think solve your problem
<div class="wpcf7" id="wpcf7-f352-p353-o1"><form action="/contact-us/#wpcf7-f352-p353-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
...
</div>
<div id="inner-contact">
<span class="wpcf7-form-control-wrap first-name">
<input name="first-name" ... " type="text">
</span>
**[Omit <br></br>]**
<span class="wpcf7-form-control-wrap last-name">
<input name="last-name" ... type="text">
</span>
**[Omit <br></br>]**
<span class="wpcf7-form-control-wrap email">
<input name="email" ... type="email">
</span>
</div>
...
</div>
</form>
</div>
Also i see your first 2 field has margin-top: 6px; and margin-bottom: 20px; property but 3rd field has margin-top: 3px; and margin-bottom: 10px;!
so fix 3rd field's property like two other field and it will be ok.

Answer 2

maybe this will help,
jsFiddle
.small{
border:1px solid black;
float:left;
height:20px;
width:50px;
margin-right:20px;
}
.big
{
border:1px solid black;
float:left;
clear:left;
height:200px;
width:194px;
margin-top:20px;
}
<div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="big"></div>
</div>