Wyrównaj listę i wypchnij tekst na dół.

Question

Mam 3 skrzynki z tytułami, ramką i krótkim opisem.

W tej chwili wygląda to tak:

Chciałbym przy użyciu tylko CSS, aby wyrównać zielone granice i popchnąć wszystkie tytuły jeden wiersz do dołu.

Treści i tytuły są dynamiczne, więc może się zdarzyć, że w tytule znajdą się 1, 2, 3 wiersze, ale zawsze chcę, aby tytuły z mniejszymi wierszami zaczynały się od dołu, tak jak w poniższym przykładzie.

Nie mogę korzystać z JavaScript!

Każda sugestia zostanie doceniona.

---

Obecnie struktura kodu jest taka:

HTML:

<section id="" class="boxes"> 
       <ul class="inline"> 
        <li> 
         <article> 
          <h2>Mae hyn yn enghraifft prif llawer hwy</h2> 
          <p> 
           Mae llawer o bethau gwych cymaint yn mynd ymlaen yr haf hwn a, beth bynnag yw eich cynlluniau, nawr yw'r amser i fynd i'r afael a eich gwariant. 
          </p> 
          <a class="read-more" href="">Read more &gt;</a> 
         </article> 
        </li> 

CSS:

ul.inline { 
    display: inline-block; 
    list-style-type: none; 
    margin: 0 0 20px; 
    padding: 0; 
    width: 978px; 
} 

    ul.inline li { 
     float: left; 
     margin: 0 18px 0 0; 
     padding: 0; 
     width: 308px; 
    } 

     ul.inline li h2 { 
      border-bottom: 5px solid #34750E; 
      color: #34750E; 
      font-size: 21px; 
      margin: 0 0 10px; 
      padding: 0 0 10px; 
      position: relative; 
     } 

     ul.inline li a.read-more { 
       color: #34750E !important; 
     } 

---

EDIT:

FIDDLE UP HERE