JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div class="boxes">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</div>

CSS

.boxes div {
    background: red;
    float: left;  
}

#box1 {
    width: 100px;
    height: 200px;
}

#box2 {
    width: 200px;
    height: 300px;
}

#box3 {
    width: 300px;
    height: 100px;  
}

JavaScript

(function($) {

    var getExtreme = function(extreme, dimension) {
        return Math[extreme].apply(undefined, ($.makeArray($(this).map(function() {
            return $(this)[dimension]();
        }))));
    };

    $.fn.maxHeight = function() {
        return getExtreme.apply(this, ['max', 'height']);
    };
    $.fn.minHeight = function() {
        return getExtreme.apply(this, ['min', 'height']);
    };
    $.fn.maxWidth = function() {
        return getExtreme.apply(this, ['max', 'width']);
    };
    $.fn.minWidth = function() {
        return getExtreme.apply(this, ['min', 'width']);
    };

})(jQuery);