How to display list inline with 2 images - css

Question

I currently have two images that are displaying next together inline (so far so good). I have 3 lines of different text that I'd like to go alongside these images in line as well. So it would be: image->image->3 different lines of of text/links in a list.
All of this needs to fit in an invisible wide rectangle. So far, the two images are sized the same height and width, so if I can get the 3 lines to fit their height it would display nicely.
The (3) lines I'd like to display (from the code below) are: classes for "headline", "submitted", "share."
html, body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
#logobar {
background: rgb(206, 211, 255);
}
#logobar ul {
list-style-type: none;
margin: 40;
padding: 40;
}
#logobar li {
display: inline;
padding: 20;
font-size: 52;
font-family: Comic sans MS;
}
.box {
margin-left: 50px;
width: 650px;
height: 80px;
display: inline-block;
}
.box .headline {
font-size: 18px;
color: black;
list-style-type: none;
}
My HTML code looks like:
<div id="logobar">
<ul>
<li>Breaditt: Bread News Aggregator</li>
<li>
<img src="img/logo.jpg" alt="breaditt cat" width="150" height="100">
</li>
</ul>
</div>
<div id="breadnews">
<div class="box">
<img src="img/counter.png" alt=counter width="75" height="75" />
<img src="img/breadcat.jpg" alt=article-logo width="75" height="75" />
<div class="headline">Website dedicated to cats with bread
</div>
<div class="submitted">
<h>submitted 2 days ago by Alex Doggrowski</h>
</div>
<div class="share">
<h>14,400 Comments. Share Save hide report</h>
</div>
</div>
</div>

Answer 1

.box img {
float: left;
margin-right: 10px;
}
.box {
clear:both;
}
http://jsfiddle.net/samliew/uUcL6/

Answer 2

You can use display property.
Example:
//CSS
img{
display:inline-block; vertical-align:top;
height:100px; width:100px;
}
//HTML
<div>
<img src="1.jpg" alt="image1"/>
<img src="2.jpg" alt="image2"/>
</div>