Align icon to the right in a table cell?
<p>I have a simple table cell which contains a text and an icon. I want to align the text on the left and the icon on the right. I tried it like this, but it does not work. The only solution i know would be to create another <code>td</code> where i put the icon inside. But i want both, text and icon in one <code>td</code></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    table {
        border: 1px solid red;
    }

    td {
      border: 1px solid black;
      width: 200px;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;
    &lt;table&gt;
    &lt;tr&gt;
    &lt;td&gt;Text &lt;span align="right"&gt;&lt;i class="fa fa-toggle-on"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;Test&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;</code></pre>
</div>
</div>
</p>