title: how to align 2 span left and right without using float
body: <p>I am using bootstrap and trying to put a button inside a fake read only text box, this is roughly what i have achieved <a href="http://jsfiddle.net/boobLfkf/8/" rel="nofollow">fiddle</a></p>
  
  <p>this div is in a table with <code>.table-responsive</code> thus, if i use float, it overflows when the btn is very <a href="http://jsfiddle.net/boobLfkf/9/" rel="nofollow">wide</a></p>
  
  <p>What should i do considering the "testing" text is of variable length but my button is fixed</p>
  
  <pre><code>&lt;div class="my-container"&gt;
      &lt;span&gt;testing&lt;/span&gt;
      &lt;span class="btn btn-success pull-right"&gt;btn&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>