title: CSS: How can I make 2 HTML input elements to fill 100% of the line, with one growing on account of the other?
body: <p>I'm trying to place 2 input elements that should, together, fill the width of their container. 
  One input elements has type = "text", 
  the other input has type = "button". </p>
  
  <p>I want to write CSS such that adding longer text to the "button"'s value will make it grow wider on account of the other element. </p>
  
  <p>I found a <a href="http://jsfiddle.net/kxEML/" rel="nofollow noreferrer">solution for a similar question</a> on SO posted <a href="https://stackoverflow.com/users/1656569/nsdcars5">NSDCars5</a>, with an input element and a label element, but I can't seem to adjust it to my needs.</p>
  
  <p><a href="https://i.stack.imgur.com/hfOFY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hfOFY.png" alt="This is what I want"></a></p>
  
  <p>This is what I have: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container{
    background-color: red;
    width: 300px;
    height: 60px;
  }
  
  #a{ 
    display: inline-block;
    float: left;
  }
  
  #b{ 
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;input type="text" id="a" placeholder="Name"&gt;
    &lt;input type="button" id="b" value="JOIN US! JOIN US!"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And what I want is that the input that says "Name" will grow shorter so that both elements fill 100% of their container's width (and the line wouldn't break like it does now).</p>
  
  <p>Thanks a lot in advance!</p>