HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery equalizeHeights</title>
  <style>
    div { width: 40px; float: left; margin: 4px; background: #cce5ff; padding: 4px; }
    input { clear: both; margin-top: 80px; display: block; }
  </style>
</head>
<body>
  <div>Short</div>
  <div>Tall<br>line</div>
  <div>Mid<br>line</div>
  <input type="button" value="Equalize heights">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $.fn.equalizeHeights = function () {
      var maxHeight = this.map(function (i, e) {
        return $(e).height();
      }).get();
      return this.height(Math.max.apply(null, maxHeight));
    };
    $("input").on("click", function () {
      $("div").equalizeHeights();
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .map() equalize heights (Try It)