JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

header>this is my page header</header>
<section>
    <div class="columns three">
        <article>first article, with image title and excerpt
            <br/>Some thing more here</article>
        <article>second article, with image title and excerpt</article>
        <article>third article, with image title and excerpt</article>
    </div>
</section>
<section>
    <div class="columns five">
        <article>first article, with image title and excerpt</article>
        <article>second article, with image title and excerpt</article>
        <article>third article, with image title and excerpt</article>
        <article>fourth article, with image title and excerpt</article>
        <article>fifth article, with image title and excerpt</article>
    </div>
</section>
<section>
    <div class="columns four">
        <article>first article, with image title and excerpt</article>
        <article>second article, with image title and excerpt</article>
        <article>third article, with image title and excerpt</article>
        <article>fourth article, with image title and excerpt</article>
    </div>
</section>

JavaScript

var hEqualize = 0;
$('section').each(function () {
    hEqualize = 0;
    $(this).find('article').each(function () {
        hEqualize = jQuery(this).height() > hEqualize ? jQuery(this).height() : hEqualize;
    }).height(hEqualize);
    console.log(hEqualize);
});