JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
            <div class="container">
                <article id="first">
                    <h2>
                        ЗАГОЛОВОК 1-ПЕРВОГО БЛОКА
                        <span>БОЛЕЕ ТОЧНОЕ ОПИСАНИЯ ДЛЯ ЗАГОЛОВКА ПЕРВОГО БЛОКА</span>
                    </h2>
 
                    <p>
                        ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ
                        <a href="#">ПОДРОБНЕЕ</a>
                    </p>
                </article>
 
                <article id="second">
                    <h2>
                        ЗАГОЛОВОК 2-ВОТОРОГО БЛОКА 
                        <span>БОЛЕЕ ТОЧНОЕ ОПИСАНИЯ ДЛЯ ВОТОРОГО ПЕРВОГО БЛОКА</span>
                    </h2>
 
                    <p>
                        ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ
                        <a href="#">ПОДРОБНЕЕ</a>
                    </p>
                </article>
 
                <article id="third">
                    <h2>
                        ЗАГОЛОВОК 3-ТРЕТЬЕГО БЛОКА
                        <span>БОЛЕЕ ТОЧНОЕ ОПИСАНИЯ ДЛЯ ТРЕТЬЕГО ПЕРВОГО БЛОКА</span>
                    </h2>
 
                    <p>
                        ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ
                        <a href="#">ПОДРОБНЕЕ</a>
                    </p>
                </article>
            </div>
        </div>

CSS

h1 {
    background-color: #d9d9d9;
    font-size: 1.3em;
    text-align: center;
}
 
article {
    float: left;
    width: 30%;
    margin-right: 5%;
    color: #ffffff;
   background-color:red;
}
 
article:last-child {
    margin: none;
    margin-right: 0;
}
 
article h2 { 
    text-align: center;
    background-color: orange;
    color: #000000; 
}
 
article h2 span {
    display: block;
    font-size: 0.8em;
}
 
article p {
    background-color: #1f1f1f;
    text-align: center;
    padding: 2em 2.5em 2em 2.5em;
    font-size: 0.8em;
}
 
article p a {
    text-decoration: none;
    display: block;
    text-align: right;
    padding: 0.5em 0.5em 0 0.5em;
    color: #ffffff;
}
 
article p a:hover {
    color: #db9a28;
}

JavaScript

function setHeight() {
 
    var headerHeight1 = $('#first h2').height();
    var headerHeight2 = $('#second h2').height();
    var headerHeight3 = $('#third h2').height();
 
    var maxHeaderHeight = headerHeight1;
 
    if (maxHeaderHeight <= headerHeight2) 
    {
        maxHeaderHeight = headerHeight2;
 
        if (maxHeaderHeight <= headerHeight3)
            maxHeaderHeight = headerHeight3; 
    }
 
    $('#first h2').css({
        height: maxHeaderHeight + 'px'
    });
 
    $('#second h2').css({
        height: maxHeaderHeight + 'px'
    });
 
    $('#third h2').css({
        height: maxHeaderHeight + 'px'
    });
 
    // for <p> tag
 
    var pHeight1 = $('#first p').height();
    var pHeight2 = $('#second p').height();
    var pHeight3 = $('#third p').height();
 
    var maxPHeight = pHeight1;
 
    if (maxPHeight <= pHeight2) 
    {
        maxPHeight = pHeight2;
 
        if (maxPHeight <= pHeight3)
            maxPHeight = pHeight3; 
    }
 
    $('#first p').css({
        height: maxPHeight + 'px'
    });
 
    $('#second p').css({
        height: maxPHeight + 'px'
    });
 
    $('#third p').css({
        height: maxPHeight + 'px'
    });
}
 
setHeight(); 
$(window).resize(setHeight);