JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<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>
    <p>Let our graphics speak the thousand words that you simply don't have the time to say.</p> 
  </div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
	font-family: sans-serif;
	font-size: 16px;
	color: #727586;
}

.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{
  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;
}
.icon-small + p {
    margin-top: 15px;
}

.icon-small h4 {
    font-size: 16px;
	font-weight: bold;
	color: #333;
}

.icon-small h5 {
	font-size: 14px;
	font-weight: normal;
	color: #00BDBD;
}