title: Align to bottom with flexbox while having a float in place
body: <p>I have a picture, a title, a text, a date and a source.
  I want to position the image to the left and the source and date to the bottom. if there is too much text they will go under image and it's fine. but if there is too less. I want the date and source to go to the bottom next to the image like this:</p>
  
  <pre><code> -------------------------------
  |###########           heading 1|
  |########### text text text text|
  |########### text text text text|
  |###########                    |
  |###########                    | 
  |###########  source        date|
   --------------------------------
  </code></pre>
  
  <p>or this:</p>
  
  <pre><code> -------------------------------
  |###########           heading 1|
  |########### text text text text|
  |########### text text text text|
  |########### text text text text|
  |########### text text text text| 
  |########### text text text text| 
  | text text text text text text |
  | source                    date|
   --------------------------------
  </code></pre>
  
  <p>Everything works fine except that I can't get the source and date to go to bottom. I've tried so many solution but none have worked so far.</p>
  
  <p>Here is my <a href="http://jsfiddle.net/5AVA8/264/" rel="nofollow noreferrer">fiddle</a>:</p>