title: Arrange an icon on the left side of the text
body: <p>Im trying to have the icons on the right side of the texts like <a href="https://i.stack.imgur.com/G1Jtp.png" rel="nofollow noreferrer">this</a></p>
  <p>But <a href="https://i.stack.imgur.com/5OYHm.png" rel="nofollow noreferrer">this</a> is only what i managed to get</p>
  <p>I tried to use <code>float: left</code> to the <code>&lt;i&gt;</code> tags but it did not help</p>
  <p>code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;box&quot;&gt;
      &lt;i class=&quot;far fa-eye fa-2x&quot;&gt;&lt;/i&gt;
      &lt;h3&gt;Elementum laoreet&lt;/h3&gt;
      &lt;p&gt;Cras aliquet et mi id fermentum suspendise egget sodales lorem, vestibulum euismod lectus.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;box&quot;&gt;
      &lt;i class=&quot;far fa-eye fa-2x&quot;&gt;&lt;/i&gt;
      &lt;h3&gt;Elementum laoreet&lt;/h3&gt;
      &lt;p&gt;Cras aliquet et mi id fermentum suspendise egget sodales lorem, vestibulum euismod lectus.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;box&quot;&gt;
      &lt;i class=&quot;far fa-eye fa-2x&quot;&gt;&lt;/i&gt;
      &lt;div class=&quot;text&quot;&gt;
      &lt;h3&gt;Elementum laoreet&lt;/h3&gt;
      &lt;p&gt;Cras aliquet et mi id fermentum suspendise egget sodales lorem, vestibulum euismod lectus.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.box{
    float: right;
    width: 33.3%;
    padding: 50px;
  }
  i{
    color: red;
    float: left;
  }
  </code></pre>