Change from overlapping list to list that breaks into 2 lines

Change from overlapping list to list that breaks into 2 lines

I have a PhoneGap app that displays an unordered list utilizing jQuery mobile's layout. When you view the app on a smaller screen, the text overlaps and you can't read it anymore. I can't figure out how to have the line "break" so that it appears as two lines when the screen size is reduced, and one line when it is not reduced.

When the app is run in full screen: 
When the app is run in a reduced screen:

Is there a way to have the "Less Sales Returned..." become two lines?


The HTML chuck:

    <div data-role="content">
            <ul data-role="listview" data-divider-theme="a">
                <li data-role="list-divider"></li>
                
                <li><b>Revenues</b></li>
                <li>Gross Sales<span class="right">$543,600</span></li>
                <li>Less Sales Returned and Allowances<span class="right">$9,200</span></li>
                <li>Less Sales Discounts<span class="right">$5,100</span></li>

CSS:

    span.right {
      float: right;
    }