title: Make HTML input stretch to fill space in container
body: <p>There is a <code>&lt;div id="MyDiv"&gt;</code> element which is resized depending on page width. It contains <code>&lt;input&gt;</code> and <code>&lt;a&gt;</code> elements.</p>
  
  <p>How can I make the <code>&lt;a&gt;</code> align by the right side of the <code>&lt;div&gt;</code> and the <code>&lt;input&gt;</code> stretch to fit the free space between <code>&lt;div&gt;</code>'s left side and <code>&lt;a&gt;</code>'s right side?</p>
  
  <p>Also the <code>&lt;a&gt;</code> should not jump to the next line and there are also defined <code>min-width</code> and <code>max-width</code> on the container. Here is the code:</p>
  
  <pre><code>&lt;div id="MyDiv" style="background:#AAAAAA; width:100%; min-width:300px; max-width:600px;"&gt;
      &lt;input type="text" id="MyInput"/&gt;
      &lt;a id="MyButton" href="#"&gt;Button&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and <a href="http://jsfiddle.net/aGHqV/3/" rel="noreferrer"><strong>demo</strong></a>.</p>