title: How to make border radius for first letter in <span> and align it
body: <p>I have 3 inline blocks with "lorem ipsum" text.<br>
  They have header and content.<br>
  First letter in the header, using <code>::first-letter</code>, have different color-background and border radius.<br>
  But I can't align all first letters correctly, so I make "personal" <code>padding</code> rule for each of them, like this one:  </p>
  
  <pre><code>.info.red .first::first-letter {
      background-color: #f17c72;
      padding: 0 18px 0 18px;
  
  } 
  
  .info.gray .first::first-letter {
      background-color: #aaaeb8;
      padding: 0 15px 0 15px;
  
  } 
  
  .info.blue .first::first-letter {
      background-color: #33516b;
      padding: 0 20px 0 20px;
  }
  </code></pre>
  
  <p>Can I set position for first letter of span more easily ?<br>
  And second question is about how to make text in  to be near first letter with same side margin (See picture in the bottom of the demo) ?<br>
  Demo with both questions on <strong><a href="http://plnkr.co/edit/YLrLvsQTYsT7VwjX3awW?p=preview" rel="nofollow">Plnkr</a></strong></p>