JSFiddle - React, Tailwind, and code Playground

by vandigroup

HTML

<style type="text/css">
    .container { float:left; clear:left; width:100%; padding:0 0 2em; }
    .box { float:left; width:24%; margin-right:1%; background-color:#c9efbe; }
    .box p { margin:.5em; padding:0; }
    .containWidth {width: 460px;}
    </style>
    
    <script type="text/javascript">
    $(function(){ $('#equalize').equalHeights(); });
    </script>

<body>
<div id="demoHeader">
        <a href="/"><img src="/images/logo_examples.png" alt="Filament Group, Inc." width="141" height="26" id="logo" /></a>    
        <h1>This is an example from the Filament Group Lab Article: <a href="/lab/setting_equal_heights_with_jquery/">Setting Equal Heights with jQuery</a></h1>
        <p id="copyright">&copy;2012 Filament Group, Inc. All Rights Reserved.</p>
</div><!-- /demoHeader -->
<div class="containWidth">
    <h2>Variable heights:</h2>
    <div class="container">
        <div class="box"><p>A - Lorem ipsum dolor sit amet</p></div>
        <div class="box"><p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><p>C</p></div>
        <div class="box"><p>D - Ut enim ad minim</p></div>
    </div>
    
    <h2>Same markup, equal heights:</h2>
    <div class="container" id="equalize">
        <div class="box"><p>A - Lorem ipsum dolor sit amet</p></div>
        <div class="box"><p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><p>C</p></div>
        <div class="box"><p>D - Ut enim ad minim</p></div>
    </div>
</div>

CSS

.container { float:left; clear:left; width:100%; padding:0 0 2em; }
    .box { float:left; width:24%; margin-right:1%; background-color:#c9efbe; }
    .box p { margin:.5em; padding:0; }
    .containWidth {width: 460px;}

JavaScript

$.fn.equalHeights = function(px) {
    $(this).each(function(){
        var currentTallest = 0;
        $(this).children().each(function(i){
            if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
        });
        if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); 
        if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
        $(this).children().css({'min-height': currentTallest}); 
    });
    return this;
};