Responsive form - control the height of the text area

I have an 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 there are three text input fields, one text area and one submit button (also like input type). When the breakpoint is reached, the form flows into a two column layout. This is the part that works.

The part that doesn't work is the height of the textbox. I want it to be the same height as the three input fields on the left.
Installing it on height: 100%;

doesn't work for two reasons:

• Consider the height of the mark. Of course, I could just give it a percentage height and subtract that value from the textarea's height (10% / 90%) ...
• ... but for this, one parent element requires a fixed height, so I need to specify the shape, eg. height 200 pixels. The problem is that I actually need to match the height of the left column manually, which is not really a good solution.

So what I'm really looking for is something like the following, just not nudging pixels by hand: (also with a fiddle if you like, but note: its a bit messy. Http://jsfiddle.net/mnBEh/1/ )

How to solve this problem?