title: How can I position elements within a table cell (td) such that one element is left aligned and the other right aligned?
body: <p>Given the html code below:</p>
  
  <pre><code>&lt;tr&gt;
     &lt;td&gt;Some text &lt;a href=""&gt;Some link&lt;/a&gt; &lt;button&gt;Some Button&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt; 
  </code></pre>
  
  <p>I would like to achieve something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/3g3KL.png" alt="Image of Table"></p>
  
  <p>Would I need to add additional mark-up such as wrapping divs to float one to the left and the other to the right? I would also need elements within the td to be vertically aligned. </p>
  
  <p>What would be the best way to achieve this with minimal additional mark-up.</p>
  
  <p>I have sample code here: <a href="http://jsfiddle.net/stormwild/AAw78/17/" rel="nofollow noreferrer">http://jsfiddle.net/stormwild/AAw78/17/</a></p>
  
  <p>A related problem is how to keep alignment of the text consistent among table cells when one cell contains a floated element?</p>
  
  <p><img src="https://i.stack.imgur.com/dmc86.png" alt="enter image description here"></p>