Same Height

Small module providing a library to automagically align HTML elements with each other by setting their height to the tallest.

Fully responsive. Zero dependencies. Unlimited selectors.

How to use

The trick is to attach the library and set the data-same-height attribute with a list of DOM selectors.

For instance in code below, we will align all .item-title together and all .item-description together too.

{{ attach_library('same_height/same_height') }}

{% 
  set sameHeight = [
    '.item-title',
    '.item-description'
  ]
%}

<div class="row" data-same-height="{{ sameHeight|json_encode }}">

  {% for item in items %}
    <div class="col-12 col-md-4 item">
      <h3 class="item-title">{{ item.title }}</h3>
      <p class="item-description">{{ item.description}}</p>
    </div>
  {% endfor %}

</div>