title: CSS - dynamic length text input field and submit button in one row
body: <p>I have:</p>
  
  <pre><code>&lt;div&gt;
      &lt;input id="input" type="text" /&gt;
      &lt;button id="submit"&gt;submit&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>which gives me this
  <img src="https://i.stack.imgur.com/6DPYd.jpg" alt="enter image description here"></p>
  
  <p>If I expand the main panel by dragging it with the mouse cursor the width the new space is empty:</p>
  
  <p><img src="https://i.stack.imgur.com/tEnKD.jpg" alt="enter image description here"></p>
  
  <p>I want that the <code>&lt;input type="text" /&gt;</code> fills the whole horizontal new space but that the submit button remains in the same row.</p>
  
  <p>I tired to use <code>&lt;input style="width:100%" type="text"/&gt;</code> but then it fills the whole row and the submit button appears in the next row:</p>
  
  <p><img src="https://i.stack.imgur.com/6hroB.jpg" alt="enter image description here"></p>
  
  <p>I also tried a table as mentioned in that thread:
  <a href="https://stackoverflow.com/questions/5201621/liquid-textfield-width">Liquid textfield width</a></p>
  
  <p>The result was that it works "a little bit" the submit button overlaps the input text and a certain space on the right always remains empty:
  <img src="https://i.stack.imgur.com/D0Rzb.jpg" alt="enter image description here"></p>
  
  <p>Can somebody help me with an code idea for fill the whole space except the (static) size of the submit button.</p>
  
  <p>Thanks!</p>