JSFiddle - React, Tailwind, and code Playground

by vikastyagi87

HTML

<div class="visit_fixed_height_container">
    <div class="visit_fixed_height_child">One line</div>
    <div class="visit_fixed_height_child">Two<br>lines</div>
    <div class="visit_fixed_height_child">One line</div>
</div>

CSS

.container { border 1px solid red; }
.visit_fixed_height_child { border: 1px solid blue; float:left; width: 30%; text-align:center; }

JavaScript

jQuery(document).ready(function() {

    // Select and loop the container element of the elements you want to equalise
    $('.visit_fixed_height_container').each(function(){  
      
      // Cache the highest
      var highestBox = 0;
      
      // Select and loop the elements you want to equalise
      $('.visit_fixed_height_child', this).each(function(){
        
        // If this box is higher than the cached highest then store it
        if($(this).height() > highestBox) {
          highestBox = $(this).height(); 
        }
      
      });  
            
      // Set the height of all those children to whichever was highest 
      $('.visit_fixed_height_child',this).height(highestBox);
                    
    }); 

});