title: Multiple lines of text next to image (CSS-HTML)
body: <p>I am trying to put 2 lines of text next to an image, sort of like this</p>
  
  <pre class="lang-none prettyprint-override"><code>_________
  |       | Line one of text
  | image |
  |       | Line two of text
  ---------
  </code></pre>
  
  <p>This is the code that I have so far</p>
  
  <pre><code>&lt;p style="color: #fff;"&gt;&lt;img src="assets/image.png"&gt;&lt;span style=""&gt;Line one of text&lt;/span&gt;
      &lt;br&gt;
      &lt;span class="ban2"&gt;Line 2 of text&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code> .banner p {
    font-family: "Gentium Basic";
    font-size: 19px;
    text-align: center;
    color: #aaa;
    margin-top: -10;
    display: block;
   }
  .banner img {
    float: center; 
      margin: 5px;
   }
   .banner span {
    padding-top: 50px;
    font-size: 17px;
    vertical-align:top;
   }
    .banner .ban2 span {
    padding-top: 50px;
    font-size: 17px;
    vertical-align:top;
   }
  </code></pre>
  
  <p>But currently it does this:</p>
  
  <pre class="lang-none prettyprint-override"><code>_________
  |       | Line one of text
  | image |
  |       | 
  ---------
  Line two of text
  </code></pre>
  
  <p>I have looked all over the web but have not been able to figure out how to do this, any help would be very welcome.</p>