JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<div class="container">
    <div class="col-sm-8">
        <table class="table table-condensed table-hover table-responsive" id="one">
            <thead>
                <tr>
                    <th class="col-sm-4">1</th>
                    <th class="col-sm-3">2</th>
                    <th class="col-sm-3">3</th>
                </tr>
            </thead>
            <tbody ng-repeat="obj in obj">
                <tr ng-repeat="obj2 in obj2">
                    <td>One</td>
                </tr>
                <tr ng-repeat="obj2 in obj2">
                    <td>Two</td>
                </tr>
                <tr ng-repeat="obj2 in obj2">
                    <td>Three</td>
                </tr>
                <tr ng-repeat="obj2 in obj2">
                    <td>Four</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-sm-4">
        <table class="table table-condensed table-hover table-responsive" id="two">
            <thead>
                <tr>
                    <th class="col-sm-4">1</th>
                    <th class="col-sm-3">2</th>
                    <th class="col-sm-3">3</th>
                </tr>
            </thead>
            <tbody ng-repeat="obj in obj">
                <tr ng-repeat="obj2 in obj2">
                    <td>One</td>
                </tr>
                <tr ng-repeat="obj2 in obj2">
                    <td>Two</td>
                </tr>
                <tr ng-repeat="obj2 in obj2">
                    <td>Three</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

table {
    border-collaspe: collapse;
    border: solid 1px black;
    float: left;
    clear: none;
    display: inline-block;
    margin: 5px;
}
td {
    border: solid 1px black;
}

JavaScript

//StackOverflow Solution: http://stackoverflow.com/questions/32360755/how-to-stretch-a-table-to-another-tables-height
// Dynamically Adjust Table height
//09-02-2015

var makeSameHeight = setInterval(function () {
    var firstTable = $('table#one').height() + "px";
    var secondTable = $('table#two').height() + "px";
    if (firstTable === secondTable) {
        var doNothing = "";
        clearInterval(makeSameHeight);
    } else {
        $('table#two').css("height", firstTable);
    }
}, 100);