Display two lines of text beside an image
<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>