Better way to keep height of column section even

If Im building a row with several column and for each column the content needs to align across the row, is there a better way to do it than using multiple data-equalizers.

For instance each column has a header, content and footer. On some columns the header is one line long on others its multiple lines, but I want the content below to all align rather than look staggered

At the moment I’m doing:

   <div data-equalizer="header">
        <div data-equalizer="content">
           <div class="grid-x grid-padding-x">
              <div class="cell small-4 flex-container flex-dir-column">
                <div class="callout primary" data-equalizer-watch="header">
    	           <h3>Header 1</h3>
         	</div>
              <div class="callout primary " data-equalizer-watch="content">
                <p>Content</p>
              </div>
           </div>
          <div class="cell small-4 flex-container flex-dir-column">
                <div class="callout primary" data-equalizer-watch="header">
    	           <h3>Header 1</h3>
         	</div>
              <div class="callout primary " data-equalizer-watch="content">
                <p>Content</p>
              </div>
           </div>
        </div>
   </div>