title: how to put float: right; Font Awesome icon on same line?
body: <p>In the code below after applying float: right; on i tag the Font Awesome icon arrow goes to the right but not on same line.</p>
  
  <p>I want the arrow should be on same line like attached image.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
  
  &lt;style type="text/css"&gt;
  
  .content {
      display: block;
      margin: 0 auto;
      height: 40px;
      line-height: 40px;
      width: 300px;
      padding: 0px 20px 0px 20px;
      border: 1px solid red;
  }
  
  div {
      white-space: nowrap; 
      overflow: hidden;
      text-overflow: ellipsis;
      margin-right: 40px;
  }
  
  i {
      float: right;
      color: green;
      display: inline-block;
  }    
  
  &lt;/style&gt;
  &lt;/head&gt;
     &lt;body&gt;
  
     &lt;a class="content" href="/United Arab Emrits"&gt;
         &lt;div&gt;National and world news with background material, activities, discussion starters and teaching guides.&lt;/div&gt;
         &lt;i class="fa fa-chevron-circle-right"&gt;&lt;/i&gt;
     &lt;/a&gt;
  
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/FQXgo.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/FQXgo.jpg" alt="In the code above the output should be like attached image."></a></p>