How to align two divs inline? - html

Question

I have two divs 1)with the icon 2)with the text related to it.
I want to align them in a line.
<div class="col-lg-4">
<h4>Stunning Layouts</h4>
<div class="one"><i class="fa fa-heart service_icon"></i></div>
<div class="one"><a class="service_para">A website that works perfectly good and give a user warm experience on all mobile and tablet browsers.A website that works perfectly good and give a user warm experience on all mobile and tablet browsers. </a></div>
</div>
and my css is like
.service{
background-color:#fff;
padding:30px 100px;
}
.service_icon{
color:#fff;
background-color:#CE1E47;
padding:20px;
margin-right:10px;
border-radius:50%;
}
.one{
display:inline;
height:100%;
}
but if i write more text it gets written under the icon. i want both of them separated side by side even if i write 100 lines of text.
i hope you get it???

Answer 1

display: table-cell is what you need.
Check this fiddle
update your css -
.one{
display:table-cell;
}

Answer 2

There are several methods, here's one using positioning and padding:
http://codepen.io/anon/pen/RWGQyG
<div class="col-lg-4">
<h4>Stunning Layouts</h4>
<div class="icon-text">
<i class="fa fa-heart service_icon"></i>
<p>A website that works perfectly good and give a user warm experience on all mobile and tablet browsers.A website that works perfectly good and give a user warm experience on all mobile and tablet browsers. A website that works perfectly good and give a user warm experience on all mobile and tablet browsers.A website that works perfectly good and give a user warm experience on all mobile and tablet browsers</p>
</div>
</div>
.icon-text{
position: relative;
padding-left: 50px;
}
.service_icon{
position: absolute;
left: 0;
color:#fff;
background-color:#CE1E47;
padding:20px;
margin-right:10px;
border-radius:50%;
}

Answer 3

Add this css.
.service_icon{
color:#fff;
background-color:#CE1E47;
padding:20px;
margin-right:10px;
border-radius:50%;
display: inline-block;
}
.one{
display:inline;
height:100%;
float: left;
}
.one:first-child{
width: 20%;
}
.one:last-child{width: 80%;}
you can test here http://jsfiddle.net/prakashlaxkar/z6m9zk8m/