javascript - Make multiple text passages take up same space? -

i making page bunch of items on differing headings , text. want headings , text line @ same height. headings 2 lines, 1. needs responsive, can't set min-height.

screenshot http://iforce.co.nz/i/cw1tl2gq.vhr.jpg

is possible h2's , p's same height? hacky way thinking padding out shorter ones javascript, last resort.

the html is:

<div class="itemcontainer" style="width:25.0%;"> <div class="catitemview groupprimary">     <div class="catitemheader">         <h3 class="catitemtitle">             <a href="/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="/index.php/projects/item/46-wairamarama-onewhero-seal-extension" title="wairamarama-onewhero seal extension">                     <img src="/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 wairamarama-onewhero seal extension sub-contractor heb construction.</p>         </div>         <div class="clr"></div>     </div>     <div class="clr"></div>     <div class="catitemreadmore">         <a class="k2readmore" href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension">read more...</a>     </div>     <div class="clr"></div> </div> 

this generated k2/joomla! there isn't flexibility in it. this page if want see it.

you "fix" appearance setting height of elements have variable content value holds largest. follwoing css page linked to:

div.catitemintrotext {   height: 180px; } div.catitemheader h3.catitemtitle {   height: 45px; } 

this works because know in advance height looks best.

if in position alter html take fresh approach , use grid system. here approach uses twitter bootstrap (demo)

<div class="container">     <div class="row">         <div class="span3">              <h2>wairamarama-onewhero seal extension</h2>          </div>         <div class="span3">              <h2>te rapa pass</h2>          </div>         <div class="span3">              <h2>stockton mine</h2>          </div>         <div class="span3">              <h2>state highway 88 dunedin realignment</h2>          </div>     </div>     <div class="row">         <div class="span3">             <img src="http://placekitten.com/200/300" />         </div>         <div class="span3">             <img src="http://placekitten.com/200/300" />         </div>         <div class="span3">             <img src="http://placekitten.com/200/300" />         </div>         <div class="span3 readmore">             <img src="http://placekitten.com/200/300" />         </div>     </div>     <div class="row">         <div class="span3 readmore"> <a href='#' class='btn btn-primary'>read more</a>          </div>         <div class="span3 readmore"> <a href='#' class='btn btn-primary'>read more</a>          </div>         <div class="span3 readmore"> <a href='#' class='btn btn-primary'>read more</a>          </div>         <div class="span3 readmore"> <a href='#' class='btn btn-primary'>read more</a>          </div>     </div> </div> 

by putting each row (of text, images , buttons) on it's own <div.row> spill on handled automatically.