html - Equal Row Height in Sibling Flexbox Items/Columns -

i have multiple products heading, description , call-to-action. word count of each not regulated. using flexbox display these products containers of each item of equal height , can clear next row without having mess nth-child.

my question this. there flex property (or other css property) can allow me match height of rows in separate columns?

codepen http://codepen.io/fedaykin00/pen/yexolv

desired outcome

html

<div class="container">   <div class="item">     <div class="item-row item-heading">       <h1>item 1: far far away</h1>     </div>     <div class="item-row item-body">       <p>far far away, behind word mountains, far countries vokalia , consonantia, there live blind texts. separated live in bookmarksgrove right @ coast of semantics, large language ocean. small river named duden flows         place , supplies necessary</p>     </div>     <div class="item-row item-cta">       <a href="#" class="cta">far far away</a>     </div>   </div>   <div class="item">     <div class="item-row item-heading">       <h1>item 2: wonderful serenity has taken possession of entire soul</h1>     </div>     <div class="item-row item-body">       <p>a wonderful serenity has taken possession of entire soul, these sweet mornings of spring enjoy whole heart.</p>     </div>     <div class="item-row item-cta">       <a href="#" class="cta">a wonderful serenity</a>     </div>   </div>   <div class="item">     <div class="item-row item-heading">       <h1>item 3: 1 morning, when gregor samsa</h1>     </div>     <div class="item-row item-body">       <p>one morning, when gregor samsa woke troubled dreams, found himself transformed in bed horrible vermin. lay on armour-like back, , if lifted head little see brown belly, domed , divided arches stiff sections. bedding hardly able cover , seemed ready slide off moment. many legs, pitifully thin compared size of</p>     </div>     <div class="item-row item-cta">       <a href="#" class="cta">one morning</a>     </div>   </div>   <div class="item">     <div class="item-row item-heading">       <h1>item 4: quick, brown fox</h1>     </div>     <div class="item-row item-body">       <p>the quick, brown fox jumps on lazy dog. djs flock when mtv ax quiz prog. junk mtv quiz graced fox whelps. bawds</p>     </div>     <div class="item-row item-cta">       <a href="#" class="cta">the quick</a>     </div>   </div>   <div class="item">     <div class="item-row item-heading">       <h1>item 5: li europan lingues es membres del sam familie</h1>     </div>     <div class="item-row item-body">       <p>li europan lingues es membres del sam familie. lor separat existentie es un myth. por scientie, musica, sport etc, litot europa usa li sam vocabular. li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. omnicos directe al desirabilite de un nov lingua franca: on refusa</p>     </div>     <div class="item-row item-cta">       <a href="#" class="cta">li europan</a>     </div>   </div> </div> 

css

.container {   display: flex;   flex-flow: row wrap;   background-color: darkred;   padding: 0.5em;   justify-content: center; }  .item {   box-sizing: border-box;   display: flex;   flex-flow: column;   width: calc((100% - 3em) / 3);   margin: 0.5em;   padding: 1em 1em 0 1em;   background-color: lightgray; }  .item-row {   margin: 0 0 1em 0;   padding: 1em;   background-color: white; } .item-row.item-cta {   margin-top: auto;   padding: 0; } .item-row.item-cta {   display: block;   background-color: blue;   padding: 1em;   color: white;   text-align: center; }  h1, p {   margin: 0; } 

as outline

• .container (flex-direction: row)
  • .item (flex-direction: column)
    • .item-row.item-heading
      • h2
    • .item-row.item-body
      • p
    • .item-row.item-cta
      • a[href]
  • .item (flex-direction: column)
    • .item-row.item-heading
      • h2
    • .item-row.item-body
      • p
    • .item-row.item-cta
      • a[href]

if , when content of 1 item's h2 fills 2 lines, fills 1 line, able match height of both of parent elements (.item-row.item-heading). same goes other instances of .item-row, when they/their children have disparate heights. want avoid having manually set heights based on current content, i'll have change when content changes.

i'm new flexbox, i'm not sure know of properties , how work. there may no built-in way this. i'm sure there's way throw scripts in mix make want, i'm trying avoid if possible.

you can use jquery matchheight:

your code:

https://jsfiddle.net/debraj/38jtno6a/10/ 

full documentation here:

http://brm.io/jquery-match-height/