JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://kelvinator.dk/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://kelvinator.dk/css/bootstrap.min.css">
<body>
<div class="container">
<div class="row-fluid">
<div class="span6">
<div class="alert alert-info">
this has text <br />
this has text <br />
</div>
</div>
<div class="span6">
<div class="alert alert-success">
<div class="media">
This needs to be same size as the other box.<br />
This needs to be same size as the other box.<br />
This needs to be same size as the other box.<br />
This needs to be same size as the other box.<br />
This needs to be same size as the other box.<br />
This needs to be same size as the other box.
</div>
</div>
</div>
</div>
</div>
</body>
JavaScript
function setHeights(){
//get all the elements that need to be equal height:
var elements = document.getElementsByClassName('alert');
//call the equaliseHeights prototype method
elements.equaliseHeights();
}
/* Extend the HTMLCollection prototype */
HTMLCollection.prototype.equaliseHeights = function() {
var maxHeight=0;
//loop through the collection to find the height of the tallest element:
for (var i = 0; i < this.length; i++) {
this[i].style.minHeight = 0; //reset min-height
var thisHeight = this[i].offsetHeight; //measure height
maxHeight = (thisHeight>maxHeight)?thisHeight:maxHeight; //store the greatest height
}
//now set the min-height for all:
for (var i = 0; i < this.length; i++) {
this[i].style.minHeight = maxHeight+"px"; //set min-height
}
return this;
};
/* on load */
(function waitForReady(){
if (document.readyState === "complete") {
setHeights();//on load, call method
window.onresize = setHeights;//on resize, call method
} else {
setTimeout(waitForReady,10);
}
})();