css help мне нужно разместить две текстовые области рядом с 4 входами

Question

Это разметка, с которой мне нужно работать. Форма создается с помощью плагина WordPress, поэтому я не могу контролировать 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>

И это мой текущий CSS,

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

Я пытаюсь сделать так, чтобы это выглядело так:

В настоящее время я могу получить только все элементы, расположенные друг над другом

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

Answer 1

попробуйте поставить

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

на элементах fieldset, а не на входе. Да, и сделайте селектор следующим образом:

body # wpcf7-f1-p214-o1 для повышения селективности и переопределения любых других стилей набора полей, установленных в теме:

вот так:

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