title: Bootstrap 3: Span elements floating right in list-group-item do not consume vertical space
body: <p>In a Bootstrap 3 <code>list-group-item</code>, I have an icon, some text, and two icons / buttons that should float right.</p>
  
  <p>I tried this:</p>
  
  <pre><code>&lt;a class="list-group-item" ng-click="handleClick()"&gt;
      &lt;span class="glyphicon glyphicon-file"&gt;&lt;/span&gt; 
      Some text goes here
      &lt;button class="btn btn-xs btn-warning pull-right" ng-click="handleButtonClick()"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;some:custom:span&gt;&lt;/some:custom:span&gt; 
  &lt;/a&gt;
  </code></pre>
  
  <p>This works great if the result fits in one line:</p>
  
  <p><img src="https://i.stack.imgur.com/vb0lc.png" alt="rendering with wide window"></p>
  
  <p>It also works when the window is so thin that the actual text does not fit in one line:</p>
  
  <p><img src="https://i.stack.imgur.com/j15AC.png" alt="the text wrapped, leaving a place for the pull-right spans"></p>
  
  <p>However, if the windows allows the text to stay in one line, but there is not enough space for the pull-right spans, things get messed up:</p>
  
  <p><img src="https://i.stack.imgur.com/XUKQL.png" alt="float sticks out below"></p>
  
  <p>What I'd actually want is that the <code>pull-right</code> spans start a new line and align right, and the <code>list-group-item</code> extends vertically for them to fit. How can I achieve that?</p>