title: CSS: 100% width minus element on same line
body: <p>How would I make an input element 100% width that is available? So, 100% width minus the width of any other elements on the same line (not knowing the width of those elements)?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bg {
    padding: 20px;
    background: #f5f5f5;
    margin-bottom: 25px;
   }
  input {
    width: 100%;
    padding: 0.4em;
    height: 25px;
    border: 1px solid #ccc;
  }
  .button {
    height: 25px;
    padding: 0.4em;
    background: #ccc;
    border: 1px solid #ccc;
    text-decoration: none;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bg"&gt;
    
    &lt;input type="text" placeholder="100% width - button" /&gt;&lt;a class="button" href="#"&gt;Click&lt;/a&gt;
    
   &lt;/div&gt;
  
  &lt;div class="bg"&gt;
    
    &lt;input type="text" placeholder="100% width" /&gt;
    
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>