Put the caption and field next to other contact form 7 - css

Question

I use contact form 7.
The html code from form:
<div class="clearfix">
<div id="left">
First name [text first-name]<br/>
Last name [text last-name]<br/>
How Did You Find Us? [text text-find-us]
</div>
<div id="right">
Email [email* your-email] <br/>
Phone [text your-phone]
</div>
</div>
Subject [text* your-subject] <br/>
Message [textarea* your-message]<br/>
[submit "Send"]
How can I put the "First name" to be in the same line with the box of box text in which user type his/her first name?

Answer 1

Not sure how Contact Form 7 renders html with those tags which are inside brackets. You could possibly use CSS/HTML to position the items.
HTML:
<div class="clearfix">
<div id="left">
<span class="label">First name</span><span class="form-input">[text first-name]</span><br/>
<span class="label">Last name</span><span class="form-input">[text last-name]</span><br/>
<span class="label">How Did You Find Us?</span><span class="form-input">[text text-find-us]</span>
</div>
<div id="right">
<span class="label">Email</span><span class="form-input">[email* your-email]</span><br/>
<span class="label">Phone</span><span class="form-input">[text your-phone]</span>
</div>
</div>
CSS:
div#left {
float: left;
width: 400px;
}
div#right {
float:left;
width: 400px;
}
span.label {
float: left;
width: 180px;
}
span.form-input {
float: left;
width: 200px;
}
Fiddle: https://jsfiddle.net/mediaguru/f1e68999/