title: how to get both icon and heading in same line in css
body: <p>I want to icon and the headings in the same line like this:</p>
  
  <p><a href="https://i.stack.imgur.com/OPKRB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OPKRB.png" alt="enter image description here"></a></p>
  
  <p>but I still got like this:</p>
  
  <p><a href="https://i.stack.imgur.com/O7WFE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/O7WFE.png" alt="enter image description here"></a></p>
  
  <p><strong>The Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="col span-1-of-3"&gt;
      &lt;span class="icon-small"&gt;
        &lt;i class="fa fa-television"&gt;&lt;/i&gt;
        &lt;h4&gt;Web applications&lt;/h4&gt;
        &lt;h5&gt;Mobile &amp; Tablets Ready&lt;/h5&gt;
      &lt;/span&gt;
      &lt;p&gt;Powerful, fast and robust web applications to cater for complex business needs.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col span-1-of-3"&gt;
      &lt;span class="icon-small"&gt;
        &lt;i class="fa fa-mobile-phone"&gt;&lt;/i&gt;
        &lt;h4&gt;Mobile apps&lt;/h4&gt;
        &lt;h5&gt;For the iPhone, iPad &amp; Android&lt;/h5&gt;
      &lt;/span&gt;
      &lt;p&gt;Apps that connect directly to your customers.&lt;/p&gt;
    &lt;/div&gt; 
    &lt;div class="col span-1-of-3"&gt;
      &lt;span class="icon-small"&gt;
        &lt;i class="fa fa-image"&gt;&lt;/i&gt;
        &lt;h4&gt; Graphic &lt;/h4&gt;
        &lt;h5&gt;Infographics, site designs and more&lt;/h5&gt;
      &lt;/span&gt;
      &lt;p&gt;Let our graphics speak the thousand words that you simply don't have the time to say.&lt;/p&gt; 
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I just few things but it not worked. I used Font Awesome and responsive grid system.</p>
  
  <p>I used this to reset the default styles:</p>
  
  <pre><code>* {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
  }
  </code></pre>