Seeking assistance with an issue in Bootstrap 4 related to responsive image height. Within a row containing four columns, the 2nd and 3rd columns occupy 5 columns each. The 2nd column contains an image while the 3rd column holds text. The challenge arises when the text in the third column expands, causing the size of the image in the 2nd column to remain responsive and match the height of the text in the 3rd column. Attempts using img-fluid from Bootstrap 4 have been unsuccessful. Below is a snippet of my code along with a link to JSFiddle for reference: JSFiddle Link
.meet-designer-tile{margin-top:80px;margin-bottom:40px;}
.collection-details .btn-collection-details{
border: none;
border-radius: 0;
padding: 15px 63px;
color: #41173F !important;
font-size: 14px;
line-height: 20px !important;
text-align: center;
margin-top: 20px;
text-decoration: none !important;
border: 1px solid black;
}
... (CSS code continues) ...
</code></pre>
<pre><code><!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row d-flex flexrow">
<div class="col col-12 col-md-5 offset-md-1 designerPhoto">
<picture>
<source media="(max-width:767px)" srcset="https://c8.alamy.com/comp/PNE9YE/milkmaid-and-dog-in-a-landscape-painting-watercolor-height-168-mm-661-in-width-200-mm-787-in-author-circle-of-edward-dayes-PNE9YE.jpg" class="lazy designerTileShadow img-fluid"/>
<img src="https://c8.alamy.com/comp/PNE9YE/milkmaid-and-dog-in-a-landscape-painting-watercolor-height-168-mm-661-in-width-200-mm-787-in-author-circle-of-edward-dayes-PNE9YE.jpg" srcset="https://c8.alamy.com/comp/PNE9YE/milkmaid-and-dog-in-a-landscape-painting-watercolor-height-168-mm-661-in-width-200-mm-787-in-author-circle-of-edward-dayes-PNE9YE.jpg 2x" class="stretch object-fit designerTileShadow img-fluid"/>
</picture>
</div>
... (HTML code continues) ...
Any help would be greatly appreciated. Thank you, Bee