css help I need to float two text areas next to 4 inputs

Question

This is the mark-up I have to work with, The form is created via a wordpress plugin so I do not have control over the HTML,

    <div class="wpcf7" id="wpcf7-f1-p214-o1"><form action="/testing/contact-us/#wpcf7-f1-p214-o1" method="post" class="wpcf7-form">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="1" />
<input type="hidden" name="_wpcf7_version" value="2.4.1" />

<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1-p214-o1" />
</div>
<fieldset>
<span class="wpcf7-form-control-wrap Name"><input type="text" name="Name" value="Name" class="wpcf7-text wpcf7-validates-as-required" size="40" /></span><br />
<span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="Email Address" class="wpcf7-text wpcf7-validates-as-email wpcf7-validates-as-required" size="40" /></span><br />
<span class="wpcf7-form-control-wrap telephone"><input type="text" name="telephone" value="Telephone" class="wpcf7-text wpcf7-validates-as-required" size="40" /></span><br />
<span class="wpcf7-form-control-wrap company"><input type="text" name="company" value="Company" class="wpcf7-text wpcf7-validates-as-required" size="40" /></span><br />
<input type="submit" value="Send" class="wpcf7-submit" /><br />
</fieldset>
<fieldset>
<span class="wpcf7-form-control-wrap town-city"><textarea name="town-city" class="wpcf7-validates-as-required" cols="40" rows="10">Atleast town/city</textarea></span><br />
</fieldset>
<fieldset>
<span class="wpcf7-form-control-wrap your-enquiry"><textarea name="your-enquiry" class="wpcf7-validates-as-required" cols="40" rows="10">Enter your enquiry</textarea></span><br />
</fieldset>

<div class="wpcf7-response-output wpcf7-display-none"></div></form>

And this is my current CSS,

    .page-id-214 input{
    margin:0px 0px 10px 0px;
    width:231px;
    border:1px solid #aaaaaa;
    float:left;
    clear:left;
}

I am trying to make it look like this,

Currently I can only get all the elements sitting on top of each other

.page-id-214 textarea {
    width:206px;
    height:109px;
    float:left;
}

Answer 1

try putting

float:left;border:0;margin:0 5px;padding:0;width:206px;
    height:109px;

on the fieldset elements, rather than the input. Oh, and make the selector this:

body #wpcf7-f1-p214-o1 to increase selectivity and override any other fieldset styles set on the theme:

so that's:

body #wpcf7-f1-p214-o1 {
float:left;
border:0;
margin:0 5px;
padding:0;
width:206px;
height:109px;
}