Căn chỉnh danh sách và đẩy văn bản xuống dưới cùng

Question

Tôi có danh sách 3 hộp có tiêu đề, đường viền và mô tả ngắn gọn.

Tại thời điểm nó trông như thế này:

Tôi muốn chỉ sử dụng CSS để gắn kết các biên giới màu xanh lá cây và đẩy tất cả các danh hiệu một hàng để phía dưới.

Nội dung và tiêu đề là động, vì vậy, có thể xảy ra rằng sẽ có 1, 2, 3 hàng cho tiêu đề nhưng tôi luôn muốn tiêu đề có ít hàng hơn bắt đầu từ dưới cùng như trong ví dụ bên dưới.

Tôi không thể sử dụng Javascript!

Mọi đề xuất sẽ được đánh giá cao.

---

Tại thời điểm này cấu trúc mã là thế này:

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