У меня есть 2 карты рядом друг с другом, я пытаюсь сделать так, чтобы они всегда имели одинаковую высоту, и у меня возникли проблемы с тем, чтобы моя левая коробка выглядела красиво без наложения.
В настоящее время у меня есть два элемента в левом поле, элемент изображения и текстовый элемент. Я пытаюсь стилизовать левую рамку так, чтобы элементы не перекрывались, и чтобы рамка реагировала при изменении размера.
В моем jsfiddle (https://jsfiddle.net/martinradio/jshet597/27/) в настоящее время это выглядит так: 
<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>
Добавление img-Fluid помогло с отзывчивостью, предотвратив наложение, но побочным эффектом было появление очень маленького изображения, я попытался исправить это, добавив стиль = "max-width: 6", но это не влияет на изображение.
Благодаря тегу img-Fluid изображение / текст больше не центрировался.
Можно ли выровнять изображение / текст, чтобы оно было выровнено по центру карты? с увеличенным изображением, сохраняя при этом отзывчивость, поэтому при изменении его размера нет перекрытия?
Спасибо