I have the following html:

<span class="icon-top-margin-4 margin-right sprite-book-open"></span>
<p>Topic: No Topic Title</p>

and CSS:

.icon-top-margin-4 {
    background-color: red;
    content: " ";
    background-image: url(/Images/fugue/sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px; 
    vertical-align:bottom;
    width: 16px;
    line-height: 16px;
}

.sprite-book-open{ background-position: 0 -288px;  } 

What I would like is for the paragraph to start after the icon but it starts on a new line. Is there a way that I can make it start on the same line as the icon? I did try float left on the paragraph but that makes it go before the icon.