How can I get an image to always appear to the right of some associated text using HTML and/or CSS?

I've got this HTML:

<div>This page provides a brief overview of the travel process, as well as many of the resources that travelers need. For guidance on best travel practices, see <a href="bla.com" target="_blank">Key Tips for UCSC Travelers</a>, which was designed to provide tips of preparing, booking, and reimbursement of travel expenses.<span><img class="ucsc_image_dynamic_size" alt="Access Connexxus Booking Tool" src="/PublishingImages/access_connexxus.gif"/></span></div>

I want the text to appear to the left side of the image (not above it); how can I accomplish that with HTML and/or CSS?

As is, it looks like this:

UPDATE

In answer to the question in the comment, here is the class the image uses:

.ucsc_image_dynamic_size {
    position: relative;
    top: 0px;
    right: 0px;
    width: auto;
    height: auto;
}

Solution

Surely you just need to put the image's HTML first, then float it right?

<div>
    <img class="ucsc_image_dynamic_size" alt="Access Connexxus Booking Tool" src="/PublishingImages/access_connexxus.gif"/>
    This page provides a brief overview of the travel process, as well as many of the 
    resources that travelers need. For guidance on best travel practices, see 
    <a href="bla.com" target="_blank">Key Tips for UCSC Travelers</a>, 
    which was designed to provide tips of preparing, booking, and reimbursement of travel expenses.
</div>

CSS:

.ucsc_image_dynamic_size {
    float: right;
    margin: 0 0 0.5em 1em;
}

Or am I missing something? Example JSFiddle (with placeholder image): http://jsfiddle.net/4s8evpod/1/