how to get both icon and heading in same line in css - html

Question

I want to icon and the headings in the same line like this:
but I still got like this:
The Code:
.icon-small i{
height: 38px;
width: 38px;
color: #fff;
background-color: #888;
border-radius: 10%;
text-align: center;
vertical-align: middle;
padding-top: 12px;
}
.icon-small + p{
margin-top: 15px;
}
.icon-small h4,
.icon-small h5{
text-align: left;
}
<div class="row">
<div class="col span-1-of-3">
<span class="icon-small">
<i class="fa fa-television"></i>
<h4>Web applications</h4>
<h5>Mobile & Tablets Ready</h5>
</span>
<p>Powerful, fast and robust web applications to cater for complex business needs.</p>
</div>
<div class="col span-1-of-3">
<span class="icon-small">
<i class="fa fa-mobile-phone"></i>
<h4>Mobile apps</h4>
<h5>For the iPhone, iPad & Android</h5>
</span>
<p>Apps that connect directly to your customers.</p>
</div>
<div class="col span-1-of-3">
<span class="icon-small">
<i class="fa fa-image"></i>
<h4> Graphic </h4>
<h5>Infographics, site designs and more</h5>
</span>
<p>Let our graphics speak the thousand words that you simply don't have the time to say.</p>
</div>
</div>
I just few things but it not worked. I used Font Awesome and responsive grid system.
I used this to reset the default styles:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

Answer 1

I think you want to float the icon:
.icon-small i {
float: left;
margin-right: 10px;
/* ... */
}
And for good measure:
.icon-small + p {
clear: left;
/* ... */
}
https://jsfiddle.net/mblase75/e42rsw04/

Answer 2

You can either use display:inline-block on the parent and display:inline on the children - or, you can use the :before pseudoclass and position it using absolute positioning.
<div class="logo">
<div class="text">Some Text</div>
</div>
.text{
position:relative;
}
.text::before {
position:absolute;
margin-left: -30px;
background-image: url("youricon.png");
background-color: #fff;
height:<<height of your icon goes here>>;
width:<<width of your icon goes here>>;
}
OR
<div class="logo">
<div class="icon"><img src="youricon.png" alt="Logo"></div>
<div class="text">Some Text</div>
</div>
.logo{
display: inline-block;
width: 100%;
}
.icon, .text {
display:inline;
}
.text{
margin-left:10px;
}

Answer 3

Just use position:absolute for the icon inside the icon-text block.
.icon-small {
position: relative;
padding: 0 0 0 48px; /* 38px icon width + 10px gap between icon and text */
}
.icon-small i {
height: 38px;
width: 38px;
position: absolute;
left: 0;
top: 0;
}

Answer 4

Since no one suggested using flexbox
take a look into this http://jsfiddle.net/hnsd4np6/2/
<div class="row container">
<div class="col span-1-of-3 box">
<span class="icon-small">
<i class="fa fa-television"></i>
<div class="details">
<h4>Web applications</h4>
<h5>Mobile & Tablets Ready</h5>
</div>
</span>
<p>Powerful, fast and robust web applications to cater for complex business needs.</p>
</div>
<div class="col span-1-of-3 box">
<span class="icon-small">
<i class="fa fa-mobile-phone"></i>
<div class="details">
<h4>Mobile apps</h4>
<h5>For the iPhone, iPad & Android</h5>
</div>
</span>
<p>Apps that connect directly to your customers.</p>
</div>
<div class="col span-1-of-3 box">
<span class="icon-small">
<i class="fa fa-image"></i>
<div class="details">
<h4> Graphic </h4>
<h5>Infographics, site designs and more</h5>
</div>
</span>
</div>
</div>
Some of the thing newly added in the html part are
added class container to the class row
added a class box to class col span-1-of-3 to to separate each product separately
Added class details to separate the icon and its descriptions
CSS
styles for the above newly added classes
.icon-small{
display:flex;
flex-direction:row;
align-items:center;
}
.details{
padding:0 1em;
}
.box{
border:1px solid #333;
background-color:#fff;
width:300px;
padding:1em;
}
.container{
display:flex;
flex-direction:row;
flex-wrap:wrap;
border:1px solid #333;
background-color:powderblue;
}
<br>
if you want to know more about flexbox clickhere