How to align text left and align (float) text right on same line?

I’m trying to create a menu for my thai restaurant and I want to have the title of the dish aligned to the left and then have the price aligned and floated to the right. Then under the title of the dish will have some of the ingredients. Check out my sample code below. I don’t know why, when I create the row with the title (text-aligned left) then price floated right, it makes the price shift down to the next line and floated right. I want it to stay in the same row as the title of the dish. The <span> tag is the part that’s moving to the next line. Can anyone help me out on this?

Here’s a link of how it looks like. Not going to be on this page, but I’m not going to touch this page until the end:
https://www.bounbistro.com/happy-hour

<div class="row-fluid">

                    <div class="span6">

                        <div class="row-fluid">

                            <strong style="text-align: left;">WOK BASIL WITH CHICKEN</strong>

                            <span style="float: right">8</span>

                        </div>

                        <div class="row-fluid">

                            <p style="font-weight: 200; font-style: italic">Ground Chicken, Basil, Bell Pepper, Onion, Chili, Holy Basil Sauce<br> (Served with Jasmine Rice / Brown Rice $1)</p>

                        </div>

                        ... Then the next items