Firefox float bug? How do I get my float:right on the same line?

Solution 1:

Change the order of the float, put it before the text like this:

<div class="btn-group">
  <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"style="width: 400px;text-align: left;">        
    <span class="glyphicon glyphicon-chevron-down" style='float: right;'></span>
    Checked option
  </button>
</div>

http://jsfiddle.net/q05n5v4c/3/

Solution 2:

It seems like the property white-space is the cause of the issue. With the class btn this property is:

white-space:nowrap

If you change that property works fine:

.btn {
    white-space:normal
}

Check the Demo Fiddle

Solution 3:

If you don't wish to reverse the order of your elements, you could float: left; the first element.