JSFiddle - React, Tailwind, and code Playground

HTML

<!-- group one -->
    <div class="item">
        .... content here <br><br><br><br>
    </div>

    <div class="item_open">
        .... This needs to match the height of the div before it.
    </div>

    <!-- group two -->
    <div class="item">
        .... completely different content here <br><br><br><br><br><br><br><br>
    </div>

    <div class="item_open">
        .... This needs to match the height of the div before it.
    </div>

CSS

.item, .item_open {
    float: left;
    width: 25%;
}

.item {
    background: #CCCCCC;
}

.item_open {
    background: #AAAAAA;
}

JavaScript

$(".item_open").each(function(){
    $(this).height($(this).prev().height());
});