how to keep <div> and <img> outside of <div> aligned

[thenoobie]

I have the following CSS Code:\[code\].blackbox { background: black; width: 17px; height: 18px; line-height: 18px; text-align: center;}\[/code\]In my HTML file, I call the following.\[code\]<div class="blackbox"> 10</div><img src="http://stackoverflow.com/questions/15500373/icon-local.png"><img src="http://stackoverflow.com/questions/15500373/icon-national.png">\[/code\]How can I keep the box that is rendered via CSS call and the images called via img tag on the same horizontal line?The goal is to create something that looks similar to this, but with the CSS box in front of the other icons. Example Image: Example ImageThanks in advance!Ken