title: Vertical align two lines of text with image bootstrap 3
body: <p>I am trying to vertically align two lines of text and an image in Bootstrap 3.  The image is always going to be the same size.  When I add a <code>&lt;br&gt;</code> tag between the lines where I want the break to occur, it moves the second line down below the image.   </p>
  
  <p><strong><a href="http://www.bootply.com/Fh4cnFThgc" rel="nofollow">Bootply demo here</a></strong></p>
  
  <pre><code>&lt;div class="col-xs-12 col-md-6"&gt;
    &lt;img style="vertical-align:middle; max-height:100px;" src="http://placehold.it/100x150"&gt;
    &lt;span class="bold"&gt;Product Name&lt;/span&gt;
    &lt;button name="remove" value="1" type="submit" class="font-tiny btn-link"&gt;Remove&lt;/button&gt;
  
    &lt;br&gt; &lt;!--this is where I would like to create line break--&gt;
    &lt;span class="small text-light"&gt;From "Company Name"&lt;/span&gt; 
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Does anyone know how to do this? I have come across other questions that appear related but not for bootstrap 3.  Thanks</p>