JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<div class="container">
    <ul>
        <li>
            <div class="button">
                <div class="a"></div>
                <div class="b"><p>text</p></div>
            </div>
        </li><li>
            <div class="button">
				<div class="a"></div>
                <div class="b"><p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p></div>
            </div>
        </li><li>
            <div class="button">
                <div class="a"></div>
                <div class="b"><p>text</p></div>
            </div>
        </li><li>
            <div class="button">
                <div class="a"></div>
                <div class="b"><p>text</p></div>
            </div>
        </li>
    </ul>
</div>

CSS

ul{
margin:0;
padding:0;
width:100%;
}
li{
display: inline-block;
width: 50%;
margin: 0 0 10px 0
}
.button{
border: 1px solid #CCC;
padding:10px;
}
li:nth-child(odd) .button{
margin-right: 5px;
}
li:nth-child(even) .button{
margin-left: 5px;
}
.a{
	width:30px;
	height:30px;
	border:1px solid #ccc;
	display: table-cell;
	margin-right:10px;
}
.b{
	display: table-cell;
}
.b p{
margin-left: 10px;
}

JavaScript

/* equal height on pairs of <li>s ///// */

$(function(){
    function equalNeighbour() {
        $(".container").find(".button").
	        each( function() {
	            var max = 0;
                    $(this).
			            each(function() {
			        	    max = Math.max(max,    $(this).height());
                         }).
			        		each(function() {
			        			$(this).height(max);
                            });
		        		});
        		}
    alert("yup");
    
    equalNeighbour();
});