JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Equalize heights Active:
<div class="row modify_parent">
    <div class="col-sm-4 alert alert-success modify_child">Some thing happens here..
        <br>Some thing happens here..
        <br>Some thing happens here..
        <br>Some thing happens here..
        <br>Some thing happens here..
        <br>
    </div>
    <div class="col-sm-offset-2 col-sm-4 alert alert-success modify_child">Other thing happens here..
        <br>
    </div>
</div>
            
            <hr>
                
                Equalize heights Passive:
<div class="row ">
    <div class="col-sm-4 alert alert-success ">Some thing happens here..
        <br>Some thing happens here..
        <br>Some thing happens here..
        <br>Some thing happens here..
        <br>Some thing happens here..
        <br>
    </div>
    <div class="col-sm-4 alert alert-success ">Other thing happens here..
        <br>
    </div>
</div>

JavaScript

var sameHeightTop = $(".modify_parent");
if (sameHeightTop.length !== 0) {
    sameHeightTop.each(function () {
        var tallest = 0;
        var sameHeightChildren = $(this).find(".modify_child");
        sameHeightChildren.each(function () {
            var thisHeight = $(this).height();
            if (thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        sameHeightChildren.height(tallest);
    });
}