JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<div class="one-block-news-txt size_1">
    1
</div>

<div class="one-block-news-txt size_2">
    2
</div>

<div class="one-block-news-txt size_3">
    3
</div>

CSS

.one-block-news-txt {
    position: relative;
    float: left;
    width: 250px;
    margin: 0 20px 20px 0;
    background: #ccc;
}

.size_1 {
    height: 150px;
}

.size_2 {
    height: 350px;
}

.size_3 {
    height: 550px;
}

JavaScript

$.fn.equalizeHeights = function() {
    var maxHeight = this.map(function(i,e) {
        return $(e).height();
    }).get();
    
    return this.height( Math.max.apply(this, maxHeight) );
};

setInterval(function () {
    var html = '<div class="one-block-news-txt size_1"></div>';
    html += '<div class="one-block-news-txt size_2"></div>';
    html += '<div class="one-block-news-txt size_3"></div>';
    
    $(document.body).append(html); // вставляем HTML
    
    $(".one-block-news-txt").equalizeHeights(); // выравниваем высоту блоков
}, 1000);

$(".one-block-news-txt").equalizeHeights();