How to separate icon from text in a div

You can simplify the code a bit by using the image as the background of the div, and adding a padding (internal spacing) greater than the side where the image will be.

In the example below, note that the class passo1 to div has been added, eliminating the redundant element hierarchy, as well as defining a 100px padding in the third row of the CSS, in the left margin. Additionally, the background image was positioned in the definition of class .passo1 :

HTML:

<div class="flx-full-width tres-passos passo1">
   <h3>Escolha um dos Planos</h3>
   <p>
      Escolha um Plano que mais se adapta a você. 
      Quantidade de domínios, contas de e-mail,
      espaço ou banco de dados,
      de acordo com o que você precisa.
   </p>
   <p>
      Aumentei o texto para você ter uma noção do que acontece
      ao ter um texto mais longo. 
      Aumentei o texto para você ter uma noção do que acontece
      ao ter um texto mais longo. 
   </p>
</div>

CSS:

.flx-full-width {
   box-sizing: border-box;
   padding: 10px 25px 13px 100px;
   margin-bottom: 20px;
}
.tres-passos {
   color:#69717A;
   border:1px solid #e9ecef;
   font: normal 16px Tahoma;
}
.tres-passos h3{
   font:normal 18px tahoma; margin:0; color:#00AFEF;
}
.passo1 {
   background: #f8f9fc url("http://testetabela.esy.es/1.png") no-repeat 12px 50%;
}

Example JS Fiddle

I've created a solution with some modifications to your example, make sure it solves your problem, and if you do, check the example updated .