force text and image to stay on one line

I am making a page for my work website that has a google map on it, then some color coded poly lines on the map. I am making a map legend, with a little colored square and a description that correspond to a colored line on the map. Here is the source for that map legend:



And here is how it looks:



What I am trying to make happen is to get the little squares and the text to stay on the same line, but that isn't working. I've tried playing around with putting the <img>'s in their own div elements and floating them left, then the <h3>'s in their own div and floating them right, but that looks more awkward that it does now. What would you do to make it straighten out?

You could move the img elements inside the h3 elements & alter the vertical-align for the img elements.

However.

It's a good idea to avoid using images when CSS properties can be used so everyones' browser doesn't have to ask the server for all those images.
6 images times 25,000 isitors per day is 150,000 "questions" the server doesn't need to answer each day.
What about somthing like this ?

Ugh, why didn't I think to make it like this? It is only obvious with what is possible with the CSS. Thanks for your super quick help joebert, very much appreciated!