Align H2 and P on right side of I - html

Question

I have the following Html and CSS Fiddle Example:
<div>
<i class="fa fa-yelp"></i>
<h2>Help</h2>
<p>This is some text which I want to be on the right side of span</p>
</div>
div {width: 200px;}
i {
font-size: 48px!important;
float: left;
}
h2 {float: left;}
p {float: left;}
I need that h2 and p to be on a same column on the right of the i tag.
I am using floats but no luck. How can I do this without tables?

Answer 1

Have you tired giving margin to the paragraph?
p {float: left;
margin-left:20px;
margin-top:0px}

Answer 2

** UPDATE **
Fiddle: http://jsfiddle.net/847ndaap/13/
In this example I am floating the left div only, and letting the right div fall into place, but giving it a padding that matches the size of your left floated div (48px). Works like a charm. I am also using min/max-width to allow the responsive bits to work.
New CSS:
.main{
max-width: 200px;
overflow: hidden;
}
.left{
float: left;
width: 48px;
}
.left i{
font-size: 48px!important;
}
.right{
padding-left: 48px;
max-width: 152px;
}
-
-
OLD:
So what you need to do is give yourself a container to hold your inner floated content. Then use 2 divs inside, a left and right. The left will contain your icon and the right will contain your content. Floats nest if you don't contain them - you will also need to specify width of each side so don't forget that. You will need to use a clearfix on your main container - in this example I am using a basic overflow hidden fix.
Fiddle: http://jsfiddle.net/847ndaap/10/
New HTML:
<div class="main">
<div class="left">
<i class="fa fa-yelp"></i>
</div>
<div class="right">
<h2>Help</h2>
<p>This is some text which I want to be on the right side of span</p>
</div>
</div>
New CSS:
.main{
width: 200px;
overflow: hidden;
}
.left{
float: left;
width: 48px;
}
.left i{
font-size: 48px!important;
}
.right{
width: 152px;
float: left;
}