title: Vertically align multiple lines of text in a div
body: <p>I'm currently writing a RSS parser and I use Ractive to generate the view. I'm trying to vertically align the contents of .feed-text-offset according to the height of .feed-item.</p>
  
  <p>How can I accomplish this?</p>
  
  <p>Demo: <a href="https://jsfiddle.net/zzx5L4e9/" rel="noreferrer">https://jsfiddle.net/zzx5L4e9/</a></p>
  
  <p>The output HTML is like this:</p>
  
  <pre><code>&lt;div class="feed-item"&gt;
      &lt;div class="news-img-container"&gt;
          &lt;img class="news-thumbnail" src="#" style="max-width: 125px;"&gt;
      &lt;/div&gt;
      &lt;div class="feed-text-offset"&gt;
          &lt;a href="#" target="_blank"&gt;Text here&lt;/a&gt;
          &lt;span class="feed-item-since"&gt;1 hr&lt;/span&gt;&lt;/div&gt;
          &lt;div style="clear: both;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.feed-item {
      padding: 2px;
      background-color: green;
      float:left;
  }
  
  .feed-item-since {
      font-size: 0.8em;
      font-weight: 400;
      margin-top: 5px;
      display: block;
  }
  
  .news-img-container {
      width: 125px;
      float: left;
  }
  
  .feed-text-offset {
      margin-left: 130px;
  }
  </code></pre>