How do I align text left and image right on the same line?

Question

I using bootstrap to do a small project, I'm trying to do a dropdown and using a arrow to show that there is something under, but im having problem trying to align the text left and the arrow right.

it is possible to align the text left and the image right this is how it looks now

Busines >         |
                  |
                  |

Is there a way to make it look like this:

Busines            >  |
                      |
                      |

code:

<a href="#Business" class="expander">Business <span 
class="glyphicon glyphicon-chevron-right pull-right"
style="float:right; margin-right:3px; font-size:0.7em; "></span></a>

Part of the menu code:

<div class="sidebar-nav">
            <div class="navbar navbar-default" role="navigation">
                  <div class="navbar-header">  
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                      <span class="sr-only">Toggle Navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                  <span class="visible-xs navbar-brand">Left Navigation</span>
                  </div>
                  <div class="navbar-collapse sidebar-navbar-collapse collapse">  
                    <nav id="leftNav" role="navigation">
                      <ul class="leftnavigation">
                      <li> 
             <a href="#Business" class="expander">Business <span class="glyphicon glyphicon-chevron-right pull-right"> </span></a>
                        <ul id="Business"> 
                          <li><a href="#">Administrative </a></li> .........

Answer 1

If you want align right arrow inside element than this element has to be width enough. If element display style is inline (default for a tag) you cannot align anything inside. E.g. if you will add display: block to your a tag or display: inline-block; width: 100% Othervise your a will not take full width of parent element

 <a href="#Business" class="expander" style="display: inline-block; width: 100%">Business 
     <span class="glyphicon glyphicon-chevron-right pull-right" style="float:right; margin-right:3px; font-size:0.7em; "></span>
 </a>

Answer 2

What display property are your anchors set to? Try setting the a.expander to display: inline-block, and give it a width. That should float your chevron glyph to the right.

Also, no need to inline-style it with float: right, as that's what bootstrap pull-right does. (redundant CSS).

Hope that helps!