Three horizontally aligned divs having the same height based on percentage

I have the following code:

jsfiddle link

The html code:

<div class="Row">
<div class="Column">C1<br>asdasd</div>
<div class="Column">C2</div>
<div class="Column3">a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br></div>

The css code:

.Row
{
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 10px;
    height: 30%;
}
.Column
{
    display: table-cell;
    background-color: #0099ff;
}
.Column3
{
    display: table-cell;
    background-color: #0099ff;
    height: 30%;
    overflow: scroll;
}

I have aligned the three divs horizontally as shown in the fiddle code, but I want to have the height of all the divs to be fixed at 30% the screen size, no matter how big the content is inside any one of the divs. As seen in the fiddle code, the divs auto scale to the maximum height of the div which has the most content in it.

Is there any way to restrict the div height to 30 in percentage and not pixels, such that it gets applied to all the remaining divs in the same row using css only.

I did happen to read the following link for equal heights in div but it is related to setting the height of all the divs to element that has the maximum height. The equal height link

Any help would be appreciated. Thanks.