Responsive form - controlling height of a textarea

Question

I've got this HTML form:

<form method="post" action="#" class="cf">
    <div class="left">
        <label for="first-name">First Name</label>
        <input type="text" name="first-name" placeholder="First Name" id="first-name" required />
        <label for="last-name">Middle Name</label>
        <input type="text" name="middle-name" placeholder="Middle Name" id="middle-name" />
        <label for="last-name">Last Name</label>
        <input type="text" name="last-name" placeholder="Last Name" id="last-name" required />
    </div>
    <div class="right">
        <label for="details">Details</label>
        <textarea name="details" placeholder="Details" id="details" required></textarea>
    </div>
    <input type="submit" name="submit" value="Submit Form" />
</form>

And this is my CSS:

/* Clearfix */
.cf:before,.cf:after { content: " "; display: table; }
.cf:after { clear: both; }

form > * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.left {
    background: rgba(255, 0, 0, .2);
}

.right {
    background: rgba(0, 255, 0, .2);
}

form {
    background: #ccc;
}

input[type="text"],
textarea {
    width: 100%;
    border: none;
}

input[type="text"] {
    margin-bottom: 10px;
}

label {
    display: inline-block;
    margin-bottom: 5px;
}

@media only screen and (min-width: 600px) {
    form {
        background: rgba(0, 0, 255, .3);
    }

    .left {
        float: left;
        width: 50%;
    }

    .right {
        float: right;
        width: 50%;
    }

    input[type="submit"] {
        clear: both;
    }
}

Fiddle
http://jsfiddle.net/gRRmh/

Basically it's three text input fields, one textarea and one submit button (aka input type submit). When the breakpoint is reached, the form flows into a two column layout. That's the part that is working.

The part that is not working is the height of the textarea. I want it to be the same height as the three input fields on the left.
Setting it to height: 100%; does not work for two reasons:

• The height of the label needs to be taken into account. Sure I could just give it a height in percentages and subtract that value from the textarea's height (10% / 90%) ...
• ...but for this to work, one parent elements needs a fixed height, so I need to give the form e.g. a height of 200px. The problem with that is I actually need to match the height of the left column by hand which isn't really a good solution.

So what I am actually looking for is something like the following, just without nudging pixels by hand: (also with fiddle if you want, but please note: Its a bit messy. http://jsfiddle.net/mnBEh/1/)

How to solve this problem?

Solution

It is only posible by giving manually height to textarea.So give height to textarea on media queries.