Menu icon Foundation
Foundation match height tabs with child equalizer.

Using foundation tabs with matched height to keep the panels the same height. One panel contains equalizer content, however the tabs fail to resize and the equalizers stacks.

<div class="row">
  <div class="column">
    <ul id="example-tabs" class="tabs" data-responsive-accordion-tabs="tabs small-accordion medium-tabs" data-match-height="true">
      <li class="tabs-title is-active">
        <a href="#example-1" aria-selected="true">Example 1</a>
      </li>
      <li class="tabs-title">
        <a href="#example-2">Example 2</a>
      </li>
    </ul>
    <div class="tabs-content" data-tabs-content="example-tabs">
      <div class="tabs-panel is-active" id="example-1">
        <div class="row small-up-1 medium-up-2" data-equalizer data-equalizer-on="medium">
          <div class="column">
            <div data-equalizer-watch>
                <h3>Title 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda porro eaque, alias pariatur ut vitae. Vitae sunt quas, reprehenderit fugiat dicta doloribus nemo earum. Voluptas rem, in earum eveniet aperiam dicta officia distinctio maxime dolore totam iste, libero id nisi.</p>
            </div>
          </div>
          <div class="column">
            <div data-equalizer-watch>
                <h3>Title 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda porro eaque, alias pariatur ut vitae. Vitae sunt quas, reprehenderit fugiat dicta doloribus nemo earum. Voluptas rem, in earum eveniet aperiam dicta officia distinctio maxime dolore totam iste, libero id nisi.</p>
            </div>
          </div>
          <div class="column">
            <div data-equalizer-watch>
                <h3>Title 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda porro eaque, alias pariatur ut vitae. Vitae sunt quas, reprehenderit fugiat dicta doloribus nemo earum. Voluptas rem, in earum eveniet aperiam dicta officia distinctio maxime dolore totam iste, libero id nisi.</p>
            </div>
          </div>
          <div class="column">
            <div data-equalizer-watch>
                <h3>Title 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda porro eaque, alias pariatur ut vitae. Vitae sunt quas, reprehenderit fugiat dicta doloribus nemo earum. Voluptas rem, in earum eveniet aperiam dicta officia distinctio maxime dolore totam iste, libero id nisi.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tabs-panel" id="example-2">
        <div class="row small-up-1 medium-up-2">
          <div class="column">
            <img src="http://placehold.it/600x500">
          </div>
          <div class="column">
            <h2>Example 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quidem, fugit. Iste natus esse atque perspiciatis quis. Consequuntur beatae expedita aspernatur porro, voluptas iure ad ut quod deleniti maxime. Adipisci cupiditate suscipit, deleniti, distinctio quod aliquam obcaecati soluta numquam harum aut neque dolore fuga amet similique optio esse, ipsum, labore! Est quidem delectus quod mollitia error repudiandae fugit porro obcaecati, ut quas molestias ratione sunt dicta molestiae illum. Nostrum expedita voluptates voluptatum nesciunt excepturi facilis fuga culpa mollitia, error ipsa!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

data-match-heighttabsEqualizerresponsive tabsBroken

Using foundation tabs with matched height to keep the panels the same height. One panel contains equalizer content, however the tabs fail to resize and the equalizers stacks.

<div class="row">
  <div class="column">
    <ul id="example-tabs" class="tabs" data-responsive-accordion-tabs="tabs small-accordion medium-tabs" data-match-height="true">
      <li class="tabs-title is-active">
        <a href="#example-1" aria-selected="true">Example 1</a>
      </li>
      <li class="tabs-title">
        <a href="#example-2">Example 2</a>
      </li>
    </ul>
    <div class="tabs-content" data-tabs-content="example-tabs">
      <div class="tabs-panel is-active" id="example-1">
        <div class="row small-up-1 medium-up-2" data-equalizer data-equalizer-on="medium">
          <div class="column">
            <div data-equalizer-watch>
                <h3>Title 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda porro eaque, alias pariatur ut vitae. Vitae sunt quas, reprehenderit fugiat dicta doloribus nemo earum. Voluptas rem, in earum eveniet aperiam dicta officia distinctio maxime dolore totam iste, libero id nisi.</p>
            </div>
          </div>
          <div class="column">
            <div data-equalizer-watch>
                <h3>Title 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda porro eaque, alias pariatur ut vitae. Vitae sunt quas, reprehenderit fugiat dicta doloribus nemo earum. Voluptas rem, in earum eveniet aperiam dicta officia distinctio maxime dolore totam iste, libero id nisi.</p>
            </div>
          </div>
          <div class="column">
            <div data-equalizer-watch>
                <h3>Title 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda porro eaque, alias pariatur ut vitae. Vitae sunt quas, reprehenderit fugiat dicta doloribus nemo earum. Voluptas rem, in earum eveniet aperiam dicta officia distinctio maxime dolore totam iste, libero id nisi.</p>
            </div>
          </div>
          <div class="column">
            <div data-equalizer-watch>
                <h3>Title 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda porro eaque, alias pariatur ut vitae. Vitae sunt quas, reprehenderit fugiat dicta doloribus nemo earum. Voluptas rem, in earum eveniet aperiam dicta officia distinctio maxime dolore totam iste, libero id nisi.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tabs-panel" id="example-2">
        <div class="row small-up-1 medium-up-2">
          <div class="column">
            <img src="http://placehold.it/600x500">
          </div>
          <div class="column">
            <h2>Example 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quidem, fugit. Iste natus esse atque perspiciatis quis. Consequuntur beatae expedita aspernatur porro, voluptas iure ad ut quod deleniti maxime. Adipisci cupiditate suscipit, deleniti, distinctio quod aliquam obcaecati soluta numquam harum aut neque dolore fuga amet similique optio esse, ipsum, labore! Est quidem delectus quod mollitia error repudiandae fugit porro obcaecati, ut quas molestias ratione sunt dicta molestiae illum. Nostrum expedita voluptates voluptatum nesciunt excepturi facilis fuga culpa mollitia, error ipsa!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>