title: How to align font awesome icon to the right in a list of links?
body: <p>I am trying to get my bottom borders and my arrows to all fill the parent div and be lined up on the right. I want them to look like this in all views not just when it's mobile.</p>
  
  <p><a href="https://i.stack.imgur.com/CKU0C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CKU0C.png" alt="enter image description here"></a></p>
  
  <p>I believe there's an issue with the div not going 100% but I just cannot seem to figure it out.</p>
  
  <p>Here is the JS Fiddle I created: <a href="https://jsfiddle.net/e9uv08wh/2/" rel="nofollow noreferrer">https://jsfiddle.net/e9uv08wh/2/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
    color: #544f47;
    height: 3.4em;
    display: block;
    display: table-cell;
    vertical-align: middle;
    width: 25%;
    font-weight: normal;
    padding-left: 1em;
    border-bottom: .0625em solid #544f47;
  }
  
  i.fa.fa-chevron-right {
    float: right;
    margin-right: .5em;
    padding-top: .3em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
  &lt;span&gt;&lt;div class="border"&gt;&lt;a class="newnav" href="https://www.google.com/"&gt;Google&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;/span&gt;
  
  &lt;span&gt;&lt;div class="border"&gt;&lt;a href="https://www.google.com/"&gt;Google Google Google&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt; &lt;/span&gt;
  
  &lt;span&gt;&lt;div class="border"&gt;&lt;a href="https://www.google.com/"&gt;Google &lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;/span&gt;
  
  &lt;span&gt;&lt;div class="border"&gt;&lt;a href="https://www.google.com/"&gt;Submit to Google&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt;&lt;/span&gt;
  
  &lt;span&gt;&lt;div class="border"&gt;&lt;a href="https://www.google.com/"&gt;Google&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt;&lt;/span&gt;
  
  &lt;span&gt;&lt;div class="border"&gt;&lt;a class="newnav" href="https://www.google.com/"&gt;Google&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>CSS: </p>