JSFiddle - React, Tailwind, and code Playground

by paffffff

HTML

<h1>Отличный пример современного подхода к equalHeights</h1>
<h2>все разной высоты</h2>
<ul class="clearfix">
			<li>Далеко-далеко за словесными горами.Далеко-далеко за словесными горами.</li>
			<li>Грамматики там родного сих.</li>
			<li>Знаках она текстами это.Знаках она текстами это.Знаках она текстами это.Знаках она текстами это.</li>
			<li>Вопрос, даже грамматики то.</li>
			<li>От всех собрал предупредила которой.</li>
    <li>От всех собрал предупредила которой.От всех собрал предупредила которой.</li>
		</ul>
<h2>все одинаковой высоты data-equal="li"</h2>
<ul class="clearfix" data-equal="li">
			<li>Далеко-далеко за словесными горами.Далеко-далеко за словесными горами.</li>
			<li>Грамматики там родного сих.</li>
			<li>Знаках она текстами это.Знаках она текстами это.Знаках она текстами это.Знаках она текстами это.</li>
			<li>Вопрос, даже грамматики то.</li>
			<li>От всех собрал предупредила которой.</li>
    <li>От всех собрал предупредила которой.От всех собрал предупредила которой.</li>
		</ul>

CSS

li {
			float: left;
			width: 100px;
			margin: 10px;
			padding: 10px;
			list-style: none;
			background: #ccc;
		}
		.clearfix:before, 
		.clearfix:after { content: ""; display: table; }
		.clearfix:after { clear: both; }
		.clearfix { *zoom: 1; }

JavaScript

/*!
 * https://github.com/mattbanks/jQuery.equalHeights
 * Simple jQuery Equal Heights
 *
 * Copyright (c) 2013 Matt Banks
 * Dual licensed under the MIT and GPL licenses.
 * Uses the same license as jQuery, see:
 * http://docs.jquery.com/License
 *
 * @version 1.5.0
 */
(function($) {

    $.fn.equalHeights = function() {
        var maxHeight = 0,
            $this = $(this);

        $this.each( function() {
            var height = $(this).innerHeight();

            if ( height > maxHeight ) { maxHeight = height; }
        });

        return $this.height(maxHeight);
    };

    // auto-initialize plugin
    $('[data-equal]').each(function(){
        var $this = $(this),
            target = $this.data('equal');
        $this.find(target).equalHeights();
    });

})(jQuery);