bootstrap-4 side-by-side card width responsiveness issue - html

Question

I have two side by side card boxes in Bootstrap-4 with text and some other elements inside them:
<div class="container-fluid">
<div class="card-deck">
<!-- Box 1 (left) -->
<div class="card">
<div class="card-body">
Box 1
</div>
</div>
<!-- Box 2 (right) -->
<div class="card" >
<div class="card-body">
<div class="col">
<h4 class="mb-2">
Box 2 Title
</h4>
<p class="small text-muted mb-0">
Box 2 Subtitle
</p>
</div>
<div class="row no-gutters">
<div class="col">col2</div>
<div class="col">col2</div>
<div class="col">col2</div>
<div class="col">col2</div>
</div>
<div class="row no-gutters">
<div class="col">col2</div>
<div class="col">col2</div>
<div class="col">col2</div>
<div class="col">col2</div>
</div>
</div>
</div>
</div>
</div>
Right now the responsiveness of these two boxes is perfect; if I resize the browser super thin; the text never leaves the box (Nice!)
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
<!-- Box 1 (left) --> <div class="card">
to
<!-- Box 1 (left) --> <div class="card col-4">
by adding col-4.
This does the visual change I want:
But now when I resize the browser the text of Box 1 clips outside the box (Bad! Not want I want)
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?
Thanks

Answer 1

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card mb-4 box-shadow">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 box-shadow">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>