title: In HTML, how can I make a control take up all the horizontal space of the left column without going to the next line
body: <p>I'm trying to be a good developer and not use tables, but I've been unsuccessful.  Here's my attempt...</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Because some people complain if I don't specify all the obvious tags&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div style="width:100%"&gt;
          &lt;div style="background-color:Purple;width:25px;float:right"&gt;&lt;input type="button" style="width:15px" /&gt;&lt;/div&gt;
          &lt;div style="background-color:Aqua"&gt;&lt;input style="width:100%" /&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the output that I get.  I was hoping the input box would be on the left side of the button, but unfortunately it's underneath.</p>
  
  <p><img src="https://i.stack.imgur.com/bLx7u.jpg" alt="Output"></p>
  
  <p>To demonstrate what I want, this is how I would do it if I were to use a table:</p>
  
  <pre><code>&lt;table style="width:100%"&gt;
      &lt;tr&gt;
          &lt;td style="background-color:Aqua"&gt;&lt;input style="width:100%;box-sizing: border-box" /&gt;&lt;/td&gt;
          &lt;td style="background-color:Purple;width:25px"&gt;&lt;input type="button" style="width:15px" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/wcZP6.jpg" alt="Expected output"></p>
  
  <p>Please note:</p>
  
  <ul>
  <li>I can't change the doctype tag</li>
  <li>The solution must not use tables</li>
  <li>This should work regardless of the size specified in the containing div, which is currently set to 100%.</li>
  </ul>
  
  <p>Thank you :)</p>