JensRantil/example.html

## example.html
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      equalizeHeights();
    }
    </script>
    <style>
      .box {
        /* setting narrow height to have different heights */
        width: 30px;
      }
    </style>
  </head>
  <body>
    <div class="box" style="background-color: blue;float:right;" data-height-group="group1">
      This one box. It has the same height as the other box.
    </div>
    <div class="box" style="background-color: red;float:right;" data-height-group="group1">
      This another box. It has the same height as the first box.
    </div>
  </body>
</html>

## height-equalizer.js
/**
 * Make all elements in the same `data-height-group` group equal heights.
 *
 * Example:
 * <div data-height-group="group1">Element one.</div>
 * <div data-height-group="group1">Another element with the same height.</div>
 */
function equalizeHeights() {
  var maxheights = {};
  $('[data-height-group]').each(function() {
    var group = $(this).attr('data-height-group');
    var height = parseInt($(this).height());
    if (maxheights[group] === undefined || maxheights[group] < height) {
      maxheights[group] = height;
    }
  });
  for (group in maxheights) {
    $('[data-height-group=' + group + ']').height(maxheights[group]);
  }
}
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	equalizeHeights();
	}
	</script>
	<style>
	.box {
	/* setting narrow height to have different heights */
	width: 30px;
	}
	</style>
	</head>
	<body>
	<div class="box" style="background-color: blue;float:right;" data-height-group="group1">
	This one box. It has the same height as the other box.
	</div>
	<div class="box" style="background-color: red;float:right;" data-height-group="group1">
	This another box. It has the same height as the first box.
	</div>
	</body>
	</html>
	/**
	* Make all elements in the same `data-height-group` group equal heights.
	*
	* Example:
	* <div data-height-group="group1">Element one.</div>
	* <div data-height-group="group1">Another element with the same height.</div>
	*/
	function equalizeHeights() {
	var maxheights = {};
	$('[data-height-group]').each(function() {
	var group = $(this).attr('data-height-group');
	var height = parseInt($(this).height());
	if (maxheights[group] === undefined \|\| maxheights[group] < height) {
	maxheights[group] = height;
	}
	});
	for (group in maxheights) {
	$('[data-height-group=' + group + ']').height(maxheights[group]);
	}
	}