Bootstrap 3: Span elements floating right in list-group-item do not consume vertical space

To keep the buttons aligned wrap a new element around them and float the wrapping element. Then clear the float on list items with the .clearfix class to fix their height.

<div class="list-group">
  <a href="#" class="list-group-item clearfix">
    <span class="glyphicon glyphicon-file"></span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <span class="pull-right">
      <button class="btn btn-xs btn-info">CCS</button>
      <button class="btn btn-xs btn-warning">
        <span class="glyphicon glyphicon-trash"></span>
      </button>
    </span>
  </a>
</div>

See live example here: http://jsfiddle.net/cdog/EpG7x/.

However, placing buttons within a link is not valid according to the HTML5 specification from W3C.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

A similar result can be achieved using panels with tables instead.

<div class="panel panel-default">
  <table class="table table-hover">
    <tbody>
      <tr>
        <td>
          <span class="glyphicon glyphicon-file"></span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </td>
        <td class="text-right text-nowrap">
          <button class="btn btn-xs btn-info">CCS</button>
          <button class="btn btn-xs btn-warning">
            <span class="glyphicon glyphicon-trash"></span>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

To prevent content inside a cell from wrapping, you can use the .text-nowrap class (added in Bootstrap v3.2.0).

See live example here: http://jsfiddle.net/cdog/6mFDH/.