title: CSS middle-align TWO spans to the right of an image
body: <p>I've seen working examples of middle-aligning a single line of text next to an image, like so:</p>
  
  <pre><code>&lt;div&gt;
      &lt;img style="vertical-align:middle" src="testImage.png" /&gt;
      &lt;span style=""&gt;This works&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I need to align <em>two</em> spans, one above the other, because they will eventually need to have different styles, and the following results in the second span being rendered <em>beneath</em> the image:</p>
  
  <pre><code>&lt;div&gt;
      &lt;img style="vertical-align:middle;" src="testImage.png" /&gt;
      &lt;span&gt;This doesn't work&lt;/span&gt;&lt;br /&gt;
      &lt;span&gt;I'm annoyed&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>NOTE:</strong> I did experiment with using <em>float:left;</em> for the image, which does work to a degree, but fails when the text is long enough that it requires the div to expand (it does not factor in the width of the image and produces an undesired text-wrap)</p>
  
  <p><strong>EDIT:</strong> This is an example of the solution that worked for me, based on the answer given by aje, containing a small tweak of adding <em>vertical-align: middle;</em> to the div tag. I've included this as an edit, rather than add my own answer, because I'd like to credit aje with the answer that helped me:</p>
  
  <pre><code>&lt;div style="border: solid 2px green;"&gt;
      &lt;img style="border: solid 2px black; vertical-align: middle; width: 32px; height: 32px;" src="https://dummyimage.com/300.png/09f/fff" /&gt;
      &lt;div style="vertical-align: middle; display: inline-block"&gt;
          &lt;span&gt;This now works properly.&lt;/span&gt;&lt;br /&gt;
          &lt;span&gt;Thanks for the help!&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>