Can someone help me with aligning 2 display:inline elements left and right

I need some help getting 2 display inline elements to the left and right. If I use floats the one on the right just goes underneath the one on the left. I can't use padding on the right one because I will have the same cdoe on different pages with different length words.

<h2 class="sport_title">Premiership Betting Odds</h2>

<span class="change_league cheader">Change league &nbsp;<img src="http://my-plague.net/bigfreebet/images/site/arrow_rotate.gif"/></span>

HTML:

h2.sport_title {
            font-weight: bold; 
            font-family:arial;
            font-size: 14px;
            width: 760px;
            padding-left: 20px;
            padding-bottom: 5px;
            border-bottom: 1px solid #BFC6CB;
            background-image: url(http://www.my-plague.net/bigfreebet/images/site/arrow.gif);
	    background-repeat:no-repeat;
            display:inline;
}


.change_league{
          font-size:14px;
	  color:#555555;
	  font-weight:bold;
          display:inline;
          cursor:pointer;
          text-align: right;
}

Code (markup):

What it looks like now:



What it should look like:



I hope someone can help.

Also, I would like to put the right arrow inside the css like the one on the left, but I couldn't control its position and move it to the right of the text.

 

I think the idea here would be to float the h2 & span elements left and right respectively, within a parent wrapper of suitable width. Also the floated elements need to be given suitable widths so they will fall on the same line. If there is not enough room within their parent container, the right float will be forced onto the next line. Sometimes, Internet Explorer will do the latter even when there is apparently, just enough room. The placement of arrow gifs versus text within the floats can be done using background-position and text-align properties.

So try the following, adjusting the floats' widths and paddings to suit. Actually, I was wondering why the 2 main styled elements aren't both spans, as they are both set to font-size 14px.

CSS:

div#wrapper { width: 760px; }

h2.sport_title { 
    font-weight: bold; font-family: arial; font-size: 14px;
    padding-left: 20px; padding-bottom: 5px;
    border-bottom: 1px solid #BFC6CB;
    background-image: url(http://www.my-plague.net/bigfreebet/images/site/arrow.gif);
    background-repeat: no-repeat;
    background-position: left; 
    text-align: right;
    width: 200px; 
    float: left;
}

span.change_league { 
    font-size: 14px; font-weight: bold;
    color: #555555;
    cursor: pointer;
    background-image: url(http://my-plague.net/bigfreebet/images/site/arrow_rotate.gif);
    background-repeat: no-repeat;
    background-position: right; 
    text-align: left;
    width: 200px; 
    float: right;
}

Code (markup):

Relevant HTML:

<div id="wrapper">
  <h2 class="sport_title">Premiership Betting Odds</h2>
  <span class="change_league">Change league &nbsp;</span>
</div>

Code (markup):

 

Thanks for the reply. I tried what you said and this is what I came up with:

Edit: I am going to pay someone to sort it out so don't worry. Thanks for the help.



One was in H2 tags because it is a heading for the site.

For some reason the "change league" is set higher than the left heading, even when I add a height to the wrapper.

I want to be able to:

1) bring the "change league" down level with "Premiership Betting Odds".
2) Make the underline go all the way along.
3) Make both words closer to the arrows and make the "Premiership Betting Odds" arrow slightly higher than it is now.

thanks.

Edit: I outlined the block level elements.