Setting image baseline in flexbox layout

Question

I am trying to create a multi-column layout using flexbox and align the baselines in all columns. I do this using a property align-items: baseline. Now this works fine when the first element in each column is text, for example:

CSS

.container {
  display: flex;
  align-items: baseline; 
}

.col-2 {
  width: 48%;
}

HTML

<div class='container'> 
  <div class='col-2'>
    <h2>Nullam eget metus suscipit, auctor diam quis, sagittis eros. Phasellus quis iaculis nisi.</h2>
  </div>
  <div class='col-2'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis nulla in elit hendrerit congue. Nullam eleifend, neque vitae finibus accumsan, augue dui lacinia leo, eget sagittis ipsum dui id leo.</p>
  </div>
</div>

The problem I am facing is that the first element in the column is an image, for example:

<div class='container'> 
  <div class='col-2'>
    <h2>Nullam eget metus suscipit, auctor diam quis, sagittis eros. Phasellus quis iaculis nisi.</h2>
  </div>
  <div class='col-2'>
    <img src='https://c1.staticflickr.com/1/644/23373656961_9d6426d815_h.jpg'>
  </div>
</div>

. , , , . , , align-items flex-start, align-items . , .

- , .container. ?

, http://codepen.io/jonathink/pen/wMwgwZ

Answer 1

, , .

- , .container. ?

, align-self, .

codepen:

HTML ( .image )

<div class='container'>
  <div class='col-2'>
    <h2>Nullam eget metus suscipit...</h2>
  </div>
  <div class='col-2'>
    <p>Lorem ipsum dolor sit amet, cons...</p>
  </div>
</div>
<div class='container'>
  <div class='col-2'>
    <h2>Nullam eget metus suscipit...</h2>
  </div>
  <div class='col-2 image'><!-- ADJUSTMENT HERE -->
    <img src='https://c1.staticflickr.com/1/644/23373656961_9d6426d815_h.jpg'>
  </div>
</div>
<div class='container'>
  <div class='col-3'>
    <h2>Nullam eget metus suscipit...</h2>
  </div>
  <div class='col-3'>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class='col-3 image'><!-- ADJUSTMENT HERE -->
    <img src='https://c1.staticflickr.com/1/644/23373656961_9d6426d815_h.jpg'>
  </div>
</div>

CSS ( )

.image { align-self: flex-end; }

DEMO