Bootstrap: How to get a column with 100% the height of another column

Question

I have this kind of structure: (this is bootstrap 3 but it should be the same with version 2.x)

Pretty basic stuff, looking like a table. I want this col-lg-4 on the right to have the same size as the col-lg-8 on the left. I tried style="min-height: 100%" (which obviously didn't work since I'm asking here). I've been doing some research, but most of the people asking for the same issue want their whole content to be 100% of the page. I want this to be 100% of the left div in the same row. I don't even get why it's not working, the 100% should apply to the height of the outer row, which is the exact height that I need (the outer row has no padding, the image just looks like this for a better overview of the grid)

Answer 1

If you are familiar with jQuery...This has worked for me in the past. Just pass the group of colomns to this function.

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
       thisHeight = $(this).height();
       if(thisHeight > tallest) {
          tallest = thisHeight;
       }
   });
   group.height(tallest);
}

use like this...

$(document).ready(function(){
    equalHeight($('.cols'));
});