How to have image and text side by side

Question

I'm attempting to display the icon, and text side by side. I'm not sure I get that.

My  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>

Answer 1

You're already doing it correctly; the h4>text/h4> tag just takes up too much vertical space. You can remove it by using the margin:0px style on the h4> tag.

For future reference, you can add a border (border:1px solid black) to your elements to notice which section is incorrect.