title: bootstrap-4 side-by-side card width responsiveness issue
body: <p>I have two side by side card boxes in Bootstrap-4 with text and some other elements inside them:</p>
  
  <p><a href="https://i.stack.imgur.com/ROCK4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ROCK4.png" alt="enter image description here"></a></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-html lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
    &lt;div class="card-deck"&gt;
  
      &lt;!-- Box 1 (left) --&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-body"&gt;
         
            Box 1
      
        &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;!-- Box 2 (right) --&gt;
      &lt;div class="card" &gt;
        &lt;div class="card-body"&gt;
         
            &lt;div class="col"&gt;
              &lt;h4 class="mb-2"&gt;
                Box 2 Title
              &lt;/h4&gt;
              &lt;p class="small text-muted mb-0"&gt;
                Box 2 Subtitle
              &lt;/p&gt;
            &lt;/div&gt;
          
  
          &lt;div class="row no-gutters"&gt;
            &lt;div class="col"&gt;col2&lt;/div&gt;
            &lt;div class="col"&gt;col2&lt;/div&gt;
            &lt;div class="col"&gt;col2&lt;/div&gt;
            &lt;div class="col"&gt;col2&lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div class="row no-gutters"&gt;
            &lt;div class="col"&gt;col2&lt;/div&gt;
            &lt;div class="col"&gt;col2&lt;/div&gt;
            &lt;div class="col"&gt;col2&lt;/div&gt;
            &lt;div class="col"&gt;col2&lt;/div&gt;
          &lt;/div&gt;
          
        &lt;/div&gt; 
     
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Right now the responsiveness of these two boxes is perfect; if I resize the browser super thin; the text never leaves the box (Nice!)
  <a href="https://i.stack.imgur.com/4e2dB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4e2dB.png" alt="enter image description here"></a></p>
  
  <p>I want Box 2 (on the right) to be wider than Box 1 (on the left), I was able to accomplish this visually by changing </p>
  
  <p><code>&lt;!-- Box 1 (left) --&gt; &lt;div class="card"&gt;</code></p>
  
  <p>to </p>
  
  <p><code>&lt;!-- Box 1 (left) --&gt; &lt;div class="card col-4"&gt;</code></p>
  
  <p>by adding <strong>col-4</strong>.</p>
  
  <p>This does the visual change I want:</p>
  
  <p><a href="https://i.stack.imgur.com/6dnHn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6dnHn.png" alt="enter image description here"></a></p>
  
  <p>But now when I resize the browser the text of Box 1 clips outside the box (Bad! Not want I want)</p>
  
  <p><a href="https://i.stack.imgur.com/dhhe8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dhhe8.png" alt="enter image description here"></a></p>
  
  <p>Is there some way in Bootstrap to make the Boxes look like this (Box1 being slightly shorter than Box2) While also keeping the perfect original responsiveness where text will never clip outside the box?</p>
  
  <p>Thanks </p>