JSFiddle - React, Tailwind, and code Playground

by Leigh Quince

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 class="row-fluid">
            <div class="span6">
                <div class="alert alert-info">this has text
                    <br>this has text
                    <br>this has text
                    <br>this has text
                    <br>this has text
                    <br>this has text
                    <br>this has text
                    <br>this has text
                    <br>this has text
                    <br>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.
    ...

JavaScript

var updateHeights = function (rowTarget, colTarget) {
    //get all matching rows
    $(rowTarget).each(function () {
        var maxHeight = 0;
        
        //go through all matching cols inside each row
        $(colTarget, this).each(function () {
            
            //if the col height is larger than max so far set it
            if (maxHeight < $(this).height()) {
                maxHeight = $(this).height();
            }
        });
    
        //go though each col again to set the height
        $(colTarget, this).each(function () {
            $(this).height(maxHeight);
        });
    });

};

updateHeights('.row-fluid', '.alert');