title: How can I align multi-line text next to an image without it wrapping underneath?
body: <p>I've successfully aligned one line of text with an image (<a href="https://jsfiddle.net/ob3zgg5s/" rel="nofollow">fiddle</a>).</p>
  
  <pre><code>&lt;div class="profile-details-wrapper"&gt;
    &lt;img class="profile-picture" src="http://placehold.it/50x50" /&gt;
    &lt;span class="profile-details"&gt;
      username
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, when I try to add another line of text, it wraps under the image (<a href="https://jsfiddle.net/4ev04zss/" rel="nofollow">fiddle</a>). </p>
  
  <pre><code>&lt;div class="profile-details-wrapper"&gt;
    &lt;img class="profile-picture" src="http://placehold.it/50x50" /&gt;
    &lt;span class="profile-details"&gt;
      username
      &lt;br /&gt;
      username
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I have multi-line text that exceeds the height of the image next to it, but does not wrap underneath it?</p>
  
  <p>Bonus question: How would I go about aligning it vertically, too?</p>