Resizable equal height columns

HTML

<div class="row">
    <div style="width: 20%"></div>
    <div style="width: 50%">
        <div class="element">
            <p>Text</p>
        </div>
        <div class="element">
            <p>And more text. An complete paragraph actually.</p>
            <p>And another one!</p>
        </div>
        <div class="element">
            <p>And this is even more text.</p>
        </div>
    </div>
    <div style="width: 30%">
        <div class="element">
            <p>And this is even more text.</p>
        </div>
    </div>
</div>

CSS

p {
    padding: 3px;
}
.row {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  margin: 30px;
  width: 600px;
  outline: 2px solid grey;
}
.row > div:not(:last-child) {
    border-right: 1px solid grey;
}
.row > div:not(:last-child) .container {
    padding-right: 5px;
}
.row > div:first-child {
    background-color: yellow;
}