JSFiddle - React, Tailwind, and code Playground

by Drackir

HTML

<h1>Test Table</h1>
    <table width="100%">
    <tbody>
        <tr>
            <td>
                <div class="panel">
                    <div class="panel-header">
                    Header One

                    </div>
                    <div class="panel-body">
                    Body One
                        <br />
                        <br />
                        <br />
                    </div>
                </div>
            </td>
            <td>
                <div class="panel">
                    <div class="panel-header">
                    Header Two
                    </div>
                    <div class="panel-body">
                    Body Two
                    </div>
                </div>
            </td>
            <td>
                <div class="panel">
                    <div class="panel-header">
                    Header Three
                    </div>
                    <div class="panel-body">
                    Body Three
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
    </table>
<br /><br />
<div id="main">
    <div class="container">
        <div class="panel">
            <div class="panel-header">Header One</div>
            <div class="panel-body">Body One<br /><br /><br /></div>
        </div>
    </div>
    <div class="container">
        <div class="panel">
            <div class="panel-header">
            Header Two
            </div>
            <div class="panel-body">
            Body Two
            </div>
        </div>
    </div>
    <div class="container">
        <div class="panel">
            <div class="panel-header">
            Header Three
            </div>
            <div class="panel-body">
            Body Three
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>

CSS

td {border: 1px solid red; padding: 1px;vertical-align:top;}
.panel {border: 1px solid blue; padding: 1px;}
.panel-header{background-color: green; color: white;height:20px;}
.panel-body {border: 1px solid green; padding: 1px;}

#main {
    width:100%;
    border:1px solid  red;
    height:auto;
}
.container {
    float:left;
    width:33%;
    margin: 1px 0 1px 1px;
    height:100%;
}

JavaScript

$(function() {
    var panelheight = 0;
    var bodyheight = 0;
    $('div.panel').each(function(){
        //Loop through each "panel" classed element
        //  to find the largest height value.
        var $this = $(this);
        if ($this.height() > panelheight) {
            panelheight = $this.height();
            bodyheight = $this.children('div.panel-body').height();
        }
    }).each(function() {
        //Loop again to set them all to the largest height
        $(this).height(panelheight).children('div.panel-body').height(bodyheight);
    });
    
});