Scale right column in grid to 100% of left column - html

Question

I'm using foundations grid. I've got a grid with two columns and would like to have the content of the right column scale to 100% the height of the left column.
I made a JSBin to illustrate my problem (you have to open the output in a seperate tab for some reasons).
That is how it looks:
div {
border: 1px solid #CCC;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/normalize.min.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/vendor/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js"></script>
<div class="row" style="width:50%">
<div class="small-8 columns">
<div class="row">
left column first row
</div>
<div class="row">
left column second row
</div>
<div class="row">
left column third row
</div>
<div class="row">
left column fourth row
</div>
<div class="row">
left column fifth row
</div>
<div class="row">
left column sixth row
</div>
<div class="row">
left column seventh row
</div>
<div class="row">
left column eigth row
</div>
<div class="row">
left column ninth row
</div>
</div>
<div class="small-4 columns">
<div class="row">
this is supposed to scale to 100% of the size of the left column
</div>
</div>
</div>

Answer 1

Try like this: Demo
CSS:
div {
border: 1px solid #CCC;
}
#row_box{
display:table;
}
.child{
display:table-cell;
background-color:red;
}
.child:nth-child(2)
{
background-color:yellow;
}
HTML:
<div class="row" style="width:50%">
<div id="row_box"> // added id row_box
<div class="large-8 child"> // added class child & removed columns
<div class="row">
left column first row
</div>
<div class="row">
left column second row
</div>
<div class="row">
left column third row
</div>
<div class="row">
left column fourth row
</div>
</div>
<div class="large-4 child"> // added class child & removed columns
<div class="row">
this is supposed to scale to 100% of the size of the left column
</div>
</div>
</div>
</div>
Note:
This -ve margin is coming from your css file.