Bootstrap: Equal height of nested col-md-* elements - html

Question

I haven't found any working solution for my problem so I really hope you can help me.
Here is my jsfiddle.
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
<!-- snippet 1 -->
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6" style="padding:0;">
<div class="well" style="border-right:1px solid black;">
Test
</div>
</div>
<div class="col-md-6 col-sm-6" style="padding:0;">
<div class="well">
srewdf<br>srewdf<br>srewdf<br>srewdf<br>
</div>
</div>
</div>
<!-- snippet 2 -->
<div class="col-md-12 col-sm-12">
<div class="col-md-9 col-sm-9" style="padding:0;">
<div class="well" style="border-right:1px solid black;">
srewdf<br>srewdf<br>srewdf<br>srewdf<br>
srewdf<br>srewdf<br>srewdf<br>srewdf<br>
</div>
</div>
<div class="col-md-3 col-sm-3" style="padding:0;height:50%;">
<div class="well">
Test
</div>
</div>
<div class="col-md-3 col-sm-3" style="padding:0;height:50%;">
<div class="well">
Test
</div>
</div>
</div>
In snippet 1 I need multiple nested elements to have the same height based on the largest element.
In the second snippet it's similar. The two elements on the right side should have together the same height as the element on the left.
How is it possible to solve this without losing the responsibility?
Thanks for your time and help!

Answer 1

Equal height columns is a famous problem in the CSS model, and Bootstrap can do very little to help you.
The best you can do is read the broad amount of literature out there (I recommend starting with http://css-tricks.com/fluid-width-equal-height-columns/) and work out which of the various hacks and limitations are the correct fit for your purposes. This will differ based on the target browsers, the amount of time you want to invest, your experience with Javascript and the devices you're targeting.

Answer 2

Thanks for all your answers / comments.
This is how I solved it now:
$( document ).ready(function() {
var heights = $(".equalize").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".equalize").height(maxHeight);
});
I hoped that I can do it with plain HTML/CSS but yeah, this is the simple way.