title: Dynamic width with inline-block
body: <p>I have two <code>&lt;div&gt;</code> elements, one next to the other. Both have the CSS attribute <code>display: inline-block;</code>. Now the second <code>&lt;div&gt;</code> element has a fixed width of 100 px, whereas the first <code>&lt;div&gt;</code> element doesn't have a fixed width: it depends on the size of the window.</p>
  
  <p>My problem is that the first <code>&lt;div&gt;</code> element will spread over 100% vertically if the window is narrow. I would like to restrict its width to 100% minus 100px, so that both <code>&lt;div&gt;</code> elements can align one next to the other at all times.</p>
  
  <p>I've looked at posts with similar questions, but none really dealt with the case of <code>inline-block</code>.</p>
  
  <p><strong>EDIT</strong>: Here is a jsfiddle: <a href="http://jsfiddle.net/y3sXu/" rel="noreferrer">http://jsfiddle.net/y3sXu/</a> I want the first <code>&lt;div&gt;</code> to provide some room for the second <code>&lt;div&gt;</code> on the same line.</p>