title: Two block level elements 1 fixed width 1 stretch inside table
body: <p>I have a table with multiple columns. In one of the column rows I want to add 2 elements which will be next to each other. One text element and one icon. The icon has a fixed with, the text element needs to be dynamic and has to be truncated with ... when the column cannot stretch anymore.</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;span&gt;Truncated text goes here&lt;/span&gt;
              &lt;i class="icn sprite icn-name&gt;&lt;/i&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>How do I do this? Using <code>display: table;</code> will make the HTML  all buggy.</p>