I am making a page with a bunch of items on it with differing headings and text. I want the headings and text to all line up at the same height. Some headings will be 2 lines, some only 1. It needs to also be responsive, so I can't just set a min-height.
Is it possible to get the h2's and p's to always be the same height? The hacky way I was thinking was padding out the shorter ones with javascript, but that is a last resort.The HTML is:\[code\]<div class="itemContainer" style="width:25.0%;"><div class="catItemView groupPrimary"> <div class="catItemHeader"> <h3 class="catItemTitle"> <a href="http://stackoverflow.com/index.php/projects/item/46-wairamarama-onewhero-seal-extension">Wairamarama-Onewhero Seal Extension</a> </h3> </div> <div class="catItemBody"> <div class="catItemImageBlock"> <span class="catItemImage"> <a href="http://stackoverflow.com/index.php/projects/item/46-wairamarama-onewhero-seal-extension" title="Wairamarama-Onewhero Seal Extension"> <img src="http://stackoverflow.com/media/k2/items/cache/64d93d666355a43c4a86679a030d35b6_M.jpg" alt="Wairamarama-Onewhero Seal Extension" style="width:359px; height:auto;" /> </a> </span> <div class="clr"></div> </div> <div class="catItemIntroText"> <p>Evergreen Landcare have been involved in the Wairamarama-Onewhero Seal Extension as a sub-contractor for Heb Construction.</p> </div> <div class="clr"></div> </div> <div class="clr"></div> <div class="catItemReadMore"> <a class="k2ReadMore" href="http://stackoverflow.com/index.php/projects/item/46-wairamarama-onewhero-seal-extension">Read more...</a> </div> <div class="clr"></div></div>\[/code\]This is generated by K2/Joomla! so there isn't much flexibility in it.This is the page if you want to see it.