How can I ensure that an icon will be on the same line as text, and not on a new line?

Question

EDIT:

I got the icon to be next to the text by setting

span{max-width:140px; display:block; float:left}

but now the text in the span is overlapping the bottom of the li; it's no longer setting the height correctly.

---

I have an expandable menu that has a plus/minus icon next to the text. This is what it looks like:

<li class="category expandable">
    <span>Programs and Clinics</span>
    <a href="javascript:void(0)" class="show-second-level toggle" style="display: inline;">
        <i class="fa fa-plus"></i>
    </a>
    <a href="javascript:void(0)" class="hide-second-level toggle" style="display: none;">
        <i class="fa fa-minus"></i>
    </a>
</li>

I want to make sure that the expand icon is always on the same line as the text, because it looks bad for it to be on its own line. If "Clinics" has to move down to the next line that's fine, but how can I make sure that the icon doesn't end up on its own below the text?

Answer 1

If you want to keep "Clinics" and the icons together, they are the ones that should be wrapped in a span. Preferably one with white-space: nowrap. ;-)