Ho questa pagina: http://s17.postimg.org/3mov1dijj/Scr...2_21_36_36.png

Questo è un css approssimativo (tralasciate il fatto che è disordinato, quando funziona tutto ci penso a sistemarlo):
codice HTML:
<style>
    .block-green {
      height: 120px;
      width: 120px;
      background-color: #42B521;
      margin-left: 5px;
      display: inline-block;
      
    }
    
    .block-orange {
      height: 120px;
      width: 120px;
      background-color: orange;
      margin-left: 5px;
      display: inline-block;
      
    }
    
    .block-red-long {
      height: 120px;
      width: 248px;
      background-color: #F80D0D;
      margin-left: 5px;
      display: inline-block;
      
    }
    

    .block-green i, .block-orange i, .block-red-long i {
      font-size: 70px;
      padding-left: 30px;
    }
    
    .block-green span, .block-orange span, .block-red-long span {
      
    }


</style>


<!-- [...] -->

        <div class="block-green"><i class="fi-widget"></i><span>dsdsadsd</span></div> 
 
          <div class="block-orange"><i class="fi-wrench"></i><span>dsadsa</span></div> 

        <div class="block-red-long"><i class="fi-alert"></i><span>dsadsadsasadddddddddddddddddddddddddddddddddddddd</span></div>
Come cambio la posizione degli span o la loro lunghezza (impostando diversi "margin" e "font-size") mi sputt**na tutte le posizioni dei div.

Come devo risolvere?