title: Image and several lines of text in bootstrap dropdown-menu
body: <p>It's probably a silly question, but I don't understand why it doesn't work.
  I need to create a bootstrap menu where each item is an image on the left and several lines of text on the right.</p>
  
  <p>I wrote the following HTML for this:</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
      &lt;ul class="dropdown-menu" style="display: block;"&gt;
          &lt;li&gt;
              &lt;a href="#" class="clearfix"&gt;
                  &lt;div class="pull-left"&gt;
                      &lt;span&gt;My image&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="pull-left"&gt;
                      &lt;div&gt;Text on the right&lt;/div&gt;
                      &lt;div&gt;Second line of text&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Link to jsfiddle: <a href="https://jsfiddle.net/brucecat5/rr71xmry/" rel="nofollow noreferrer">https://jsfiddle.net/brucecat5/rr71xmry/</a></p>
  
  <p>However, width is not calculated properly and the second floated block is moved below the first block. </p>
  
  <p>I don't understand why it happens and what to do to fix this.</p>
  
  <p>P.S. I know I can implement it with <code>display: table-cell</code>, but I just don't understand the reason why my approach doesn't work.</p>