title: Align multi-line text to the right of an image
body: <p>I want to make it so that there is an image, and to the right of the image, there is text which should take up just two lines. So, something like this.. The HTML:</p>
  
  <pre><code>&lt;img&gt;
  &lt;p&gt;text one&lt;/p&gt;
  &lt;p&gt;text two&lt;/p&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>img {
      width: 200px;
      height: 200px;
      display: inline-block;
      vertical-align: top;
  }
  
  p {
      display: inline-block;
  }
  </code></pre>
  
  <p>The issue with this is that the two 'p' tags are on the same line. I tried placing a</p>
  
  <pre><code>&lt;br /&gt;
  </code></pre>
  
  <p>in between them but that sends the second 'p' below the image. Is there any way for me to make the two 'p' tags each on their own line? Note: I do not want to put the text inside a div and then give the div a width of, say 200px because I want the text to be exactly two lines regardless of the screen size. (The text is generated by the end user so if the text is long and the div is only 200px then the two 'p' tags might take up more than just two lines).</p>
  
  <p>Here is a fiddle: <a href="http://jsfiddle.net/dgh8kf5x/1/" rel="nofollow">http://jsfiddle.net/dgh8kf5x/1/</a></p>