CSS help aligning with photo and ul list items - html

Question

I am working on creating a custom tooltip plug-in and am having trouble with the CSS and HTML layout of it.
I would like to have something like this:
Nested inside some div container.
Here is a JSFiddle of what I have at the moment, but as you can see - I'm having some issues.
Thanks to all you CSS gurus!

Answer 1

Here is the updates JSFiddle I made for you: http://jsfiddle.net/Y2E36/2/ All I did was add Display:inline-block; to status-icons

Answer 2

Here is a basic re-creation for you.
Fixed h2 closing tag
Have a jsbin example!
HTML
<div class="contact">
<img src="http://www.placehold.it/100X120/FFFFFF" />
<div class="actions">
</div>
<div class="details">
<h1>John Smock</h1>
<h2>In since Thursday, 5/9/2013 at 9:45 AM</h2>
<p><span>Lync (Away 5 Min)</span> Lenexa</p>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Helvetica;
}
.contact {
height: 120px;
width: 450px;
background: #ccc;
border-top: solid 1px #000;
}
.contact img {
border-left: solid 12px orange;
border-right: solid 1px #000;
float: left;
}
.actions {
float: left;
border-right: solid 1px #000;
margin: 0 10px 0 0
}
.actions a {
background: url(http://www.placehold.it/20/FFFFFF) no-repeat;
width: 20px;
height: 20px;
display: block;
margin: 15px 13px;
border: none;
}
.details h1 {
font-size: 1em;
padding: 8px 0 5px;
}
.details h2 {
font-size: 0.8em;
font-weight: normal;
padding: 3px;
}
.details p {
font-size: 0.8em;
margin: 48px 0 0;
}
.details span {
padding: 0 5px 0 0;
border-right: solid 1px #000;
}