title: css alignment with previous sibling
body: <p>Considering the following :
  <a href="http://jsfiddle.net/Johnny5/EC8kK/" rel="nofollow">http://jsfiddle.net/Johnny5/EC8kK/</a></p>
  
  <p>I would like the input button to align right with the inner div, without wrapping with another element. Example :</p>
  
  <pre><code>|---div.container-------------------|
  |                                   |
  | |--div.box---------------|        |
  | |                        |        |
  | |------------------------|        |
  |                                   |
  |                |--input--|        |
  |                |---------|        |
  |                                   |
  |-----------------------------------|
  </code></pre>
  
  <p>The width of <code>.box</code> is known, but not the width of the input. So I can't calculate exactly the <code>margin-left</code> for that input. I don't want to add a container <code>&lt;div&gt;</code> around .box and input. Don't really care for IE &lt;= 7.</p>
  
  <p>The ideal solution will modify <em>only</em> the css, without adding html markups.</p>
  
  <p>Any suggestions?</p>