title: Bootstrap 4: Columns fixed width + rest of line in card-footer
body: <p>I've a bootstrap-4 card with a footer. Inside of the footer there is a (fixed-width) input field and a button. The button should expand to width:100% - width of the input field.</p>
  
  <p><a href="https://jsfiddle.net/aq9Laaew/224543/" rel="nofollow noreferrer">https://jsfiddle.net/aq9Laaew/224543/</a></p>
  
  <pre><code>input {
    width:3rem;
  }
  
  &lt;div class="card"&gt;
      &lt;div class="card-body"&gt;
        &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
        &lt;p class="card-text"&gt;The input field has a fixed width, the button should fill-in the rest of the line.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="card-footer"&gt;
        &lt;input type="text" value="1" /&gt;
        &lt;button&gt;
          Rest of width
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="card"&gt;
      &lt;div class="card-body"&gt;
        &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
        &lt;p class="card-text"&gt;The input field has a fixed width, the button should fill-in the rest of the line.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="card-footer"&gt;
        &lt;div class="col-auto"&gt;
          &lt;input type="text" value="1" /&gt;      
        &lt;/div&gt;
        &lt;div class="col-12"&gt;
          &lt;button&gt;
            Rest of width
          &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can it be done? As you can see in the fiddle, I tried to use col-auto, but this breaks the line with input+button into 2 lines.</p>