html - 如何让 3 个输入具有与它们旁边的文本区域相同的组合高度？

Question

我想要实现的是让左侧的 3 个浅绿色 input 垂直等间距，并且最上面的那个的顶部与 的顶部对齐>textarea 在右侧，并且最底部的底部与该 textarea 的底部对齐。我知道这有点啰嗦，但从这张照片中应该可以明显看出，其中 textarea 有点太高了，我想做的是:

http://s13.postimg.org/kv1z0aenb/Capture.png

(希望我可以嵌入图片，但我没有足够的声誉。)

在 Chrome 和 Firefox 中正确处理之前，我一直在处理像素问题，但在 Internet Explorer 中就不一样了。所以我需要一个更好的方法来解决这个问题。

HTML:

<div class="row">
    <div class="col-xxs-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <input type="text" class="hide-after-sendoff" name="name" value="Your Name" />
        <input type="text" class="hide-after-sendoff" name="email" value="Your Email Address" />
        <input type="text" class="hide-after-sendoff" name="phone" value="Your Phone Number" />
    </div>
    <div class="col-xxs-12 col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <textarea class="hide-after-sendoff" name="comments" rows="6" />' . $bigBoxTxt . '</textarea>
    </div>
</div>

CSS:

.contact-form input, .contact-form textarea {
    border: 0;
    color: #FFF;
    background: #AED270;
    padding: 0.5em;
    width: 100%;
}
.contact-form input + input {
    margin-top: 1em;
}
.contact-form textarea {
    max-width: 100%; 
    resize: none;
}

Demo

这是我的逻辑:

由于 textarea 有 6 个 rows 和一个 0.5em 的 padding，它的总高度应该是

0.5em + 6em + 0.5em = 7em

因为左边的 inputs 有一个 padding 的 0.5em 底部的 2 个有一个 margin-top 1em，它们的总高度应该是

0.5em + 1em + 0.5em + 1em + 0.5em + 1em + 0.5em + 1em = 7em

所以他们应该是相等的。正确的？或者我怎样才能做得更好？

Answer 1

一些 jQuery 可能会挽救这一天:

textarea {
    height: 100%;
}

$('#textarea-wrap').height($('#inputs-wrap').outerHeight());

Demo

在 Chrome、IE11 和 Edge 中测试。