How to have image and text side by side

Question

I'm trying to have the [as shown in picture] , facebook icon and text side by side. I cannot able to get that clearly.

My tried code

CSS

 .iconDetails {
 margin-left:2%;
float:left; 
height:40px;
width:40px; 
} 

.container2 {
    width:100%;
    height:auto;
    padding:1%;
}

HTML

<div class='container2'>
        <div>
            <img src='http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png' class='iconDetails'>
        </div>  
    <div style='margin-left:60px;'>
    <h4>Facebook</h4>
    <div style="font-size:.6em">fine location, GPS, coarse location</div>
    <div style="float:right;font-size:.6em">0 mins ago</div>
    </div>
</div>

My JSFiddle

Answer 1

Your h4 has some crazy margin on it, so remove it

h4 {
    margin:0px;
}

http://jsfiddle.net/qMdfC/2/

edit:

http://jsfiddle.net/qMdfC/6/

for the 0 minutes text, added a float left to the first div, but personally i'd just combine them, although you may have reasons not to.