Bootstrap-4 card responsive image / text columns overlapping - html

Question

I have 2 cards next to each other, I'm trying to design it such that they will always have the same height, and I'm having some trouble getting my left box to look nice with no overlap.
Currently I have two elements in the left box, an image element and a text element. I'm trying to style the left box such that the elements don't overlap and that the box is responsive when resized.
In my jsfiddle (https://jsfiddle.net/martinradio/jshet597/27/) it currently looks like this:
<br>
<div class="container-fluid">
<div class="row">
<!-- Left Box -->
<div class="col-md-4">
<div class="card mb-4 box-shadow" style=height:100%>
<div class="card-body ">
<div class="row align-items-center mb-4">
<div class="col">
<!-- Title -->
<h4 class="mb-2">
Left Box
</h4>
</div>
</div>
<div class="container h-100">
<div class=" justify-content-center align-items-center">
<div class="row ">
<!-- img -->
<div class="col-md-4">
<div class="">
<img class="img-fluid" src="https://www.kroger.com/product/images/medium/front/0004900005537" />
</div>
</div>
<!-- text -->
<div class="col-md-8 my-auto">
<div>INFO1:STUFFHERE</div>
<div>INFO2:MORESTUFFHERE</div>
<div>INFO3:EVENMORESTUFF,COOLHUH?</div>
</div>
</div> <!-- / .row -->
</div>
</div>
</div>
</div>
</div> <!-- /col -->
<!-- Right Box -->
<div class="col-md-8">
<div class="card mb-4 box-shadow" style=height:100%>
<div class="card-body">
<!-- Right Box -->
<div class="row align-items-center mb-4">
<div class="col">
<!-- Title -->
<h4 class="mb-2">
Right Box
</h4>
<!-- Subtitle -->
<p class="small text-muted mb-0">
Last Updated March 20, 2020
</p>
</div>
</div>
<!-- Top Row -->
<div class="row">
<!-- My Price -->
<div class="col-sm-2">
<h4 class="text-muted">My Price <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On My Price" ></span></h4>
</div>
<!-- Competitor Low Price -->
<div class="col-md-3 border-left">
<h4 class="text-muted">adasd <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Competitor Low Price" ></span></h4>
<span class="h2 mb-0" id='competitiveLandscape_compLowPrice'>$1.29</span>
<br>
<h5 class="text-muted mt-1">z</h5>
</div>
<!-- Competitor High Price -->
<div class="col-md-3 border-left">
<h4 class="text-muted">ad <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Competitor High Price" ></span></h4>
<span class="h2 mb-0" id='competitiveLandscape_compHighPrice'>$2.19</span>
<br>
<h5 class="text-muted mt-1">x</h5>
</div>
<!-- Competitor Price Index -->
<div class="col-md-3 border-left">
<h4 class="text-muted">sd <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Competitor Price Index" ></span></h4>
<span class="h2 mb-0" id="competitiveLandscape_cpi">1.09</span>
<br>
<span id='cpiNumSpan' class="badge mt-n1"><i id='cpiNumIcon' class="fe "></i> 230 BPS</span>
</div>
</div>
<br>
<!-- Bottom Row -->
<div class="row">
<!-- Competitors -->
<div class="col-sm-2">
<h4 class="text-muted">df <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Competitors" ></span></h4>
<span class="h2 mb-0" id='competitiveLandscape_competitors'>12</span>
<br>
<span class="badge badge-soft-danger mt-n1"><i class="fe fe-arrow-down"></i> 3</span>
</div>
<!-- Price Position -->
<div class="col-md-3 border-left">
<h4 class="text-muted">dfssdf <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Price Position" ></span></h4>
<span class="h2 mb-0" id='competitiveLandscape_pricePosition'>3</span>
<br>
<span class="badge badge-soft-success mt-n1"><i class="fe fe-arrow-up"></i> 1</span>
</div>
<!-- Price Gap -->
<div class="col-md-3 border-left">
<h4 class="text-muted">sdfsdf <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Price Gap" ></span></h4>
<span class="h2 mb-0" id='competitiveLandscape_priceGap'>35%</span>
<br>
<span class="badge badge-soft-danger mt-n1"><i class="fe fe-arrow-down"></i> 50 BPS</span>
</div>
<!-- Price Competitiveness -->
<div class="col-md-3 border-left">
<h4 class="text-muted">sdfsdf <span class="h4 fe fe-help-circle text-dark" data-toggle="tooltip" title="" data-original-title="Additional Info On Price Competitiveness" ></span></h4>
<span class="h2 mb-0" id='competitiveLandscape_priceCompetitiveness'>84%</span>
<br>
<span class="badge badge-soft-success mt-n1"><i class="fe fe-arrow-up"></i> 400 BPS</span>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /row -->
</div>
Adding img-fluid helped with the responsiveness by preventing overlap, but has the side-effect of causing the image to appear very small, I tried to fix this by adding style="max-width:6" but it's not affecting the image.
The img-fluid tag has even caused the image / text to no longer be centered.
Is there a way I can get my img / text to stay aligned in the center of the card, with the image larger, while also retaining responsiveness so when it is resized there is no overlap?
Thanks

Answer 1

If I understand correctly, you want to center your left box, don't want to overlap content with image and keep your box height the same as the right side.
I removed .container, .row and .h-100 classes from your code and also removed some unwanted div from your code for getting a suitable result.
HERE IS YOUR CODE
https://jsfiddle.net/w5pzcxn6/