title: Right border of div being cut off when using float:right with font awesome icon
body: <p><a href="http://jsfiddle.net/VtoCorleone/bZbn9/" rel="nofollow noreferrer">Fiddle of the below code</a></p>
  
  <p>** Update: The border shows in Firefox but not Chrome. **</p>
  
  <p>CSS:</p>
  
  <pre><code>.right{
      float:right;
  }
  .buttonBorder{
      border: 1px solid black; 
      padding:0px 10px 0px 10px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;span&gt;11 in stock!&lt;/span&gt;
      &lt;span class="buttonBorder"&gt;Add to &lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="right"&gt;
      &lt;span&gt;11 in stock!&lt;/span&gt;
      &lt;span class="buttonBorder"&gt;Add to &lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Result:</p>
  
  <p><img src="https://i.stack.imgur.com/vqRhZ.png" alt="enter image description here"></p>
  
  <p>The first div is not being floated to the right.  When I do float the div to the right, it cuts off the border.  I've tried adding margin-right and padding-right to the div, span and i elements and it doesn't appear to work.</p>
  
  <p>How do I make the span show the border when the div is floated to the right?</p>