title: Display two lines of text beside an image
body: <p>As you can see in the <a href="https://jsfiddle.net/haymanpl/wuhuu6az/6/" rel="nofollow">fiddle</a>, the name and title are displayed inline with the image, looks like this <a href="http://i.stack.imgur.com/QSwSr.png" rel="nofollow">screenshot</a> currently.</p>
  
  <p>But I prefer they are displayed like this vertically centered without the list style and on top of each other beside the image so they're both aligned with the image:</p>
  
  <ul>
  <li>Title </li>
  <li>Name</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.people {
    display: inline-block;
    width: 33%;
    margin-bottom: 40px;
  }
  
  .people img,
  .title {
    display: inline-block;
    vertical-align: middle;
    padding-left: 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="people"&gt;
    &lt;a href="#"&gt;
      &lt;img src="//0.gravatar.com/avatar/f9879d71855b5ff21e4963273a886bfc?s=120"&gt;
    &lt;/a&gt;
    &lt;p class="title"&gt;Title&lt;/p&gt;
    &lt;a class="name" href="#"&gt;Name&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>