I am facing an issue with my code snippet. Whenever I input a large amount of text, it causes the entire row to be pushed down, resulting in extra space underneath the image. How can I ensure that the image always fills its container and adjusts its height based on the content in the adjacent column?
For a better visual understanding, here is an image:
https://i.sstatic.net/o3Baw.png
The framework I am using is Bootstrap4.
.lesson-heading h2 {
font-size: 24px;
font-weight: 600;
}
.lesson {
background-color: #ffffff;
margin-top: 25px;
}
.lesson-img {
padding-left: 0px;
padding-right: 0px;
position: relative;
}
.trial-badge {
position: absolute;
background-color: green;
top: 10px;
left: 25px;
color: #ffffff;
font-size: 13px;
font-weight: 600;
padding: 3px 10px;
}
.lesson-content-header {
padding-top: 15px;
padding-right: 15px;
}
.lesson-content {
padding-bottom: 15px;
}
.lesson-title h4 a {
font-size: 22px;
font-weight: 600;
color: #333131;
text-decoration: none;
}
.lesson-title h4 a:hover {
color: #ed6310;
transition: .7s;
}
.lesson-status-completed i {
color: green;
}
.lesson-status-locked i, .lesson-status-new i {
color: #ccc;
}
.lesson-desc p {
font-size: 15px;
line-height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="lesson">
<div class="row">
<div class="col-lg-4">
<div class="lesson-img">
<img src="https://cdn.pixabay.com/photo/2019/04/07/23/11/content-marketing-4111003__340.jpg" alt=""
class="img-fluid">
</div>
<div class="trial-badge">
<span>Trial</span>
</div>
</div>
<div class="col-lg-8 lesson-content">
<div class="lesson-content-header d-flex justify-content-between">
<div class="lesson-title">
<h4><a href="#">This is the title of the lesson</a></h4>
</div>
<div class="lesson-status-completed"><i class="fas fa-check-circle"></i></div>
</div>
<div class="lesson-desc">
<p>This is the description of the lesson. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ullam aliquid nam adipisci in quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in
quae voluptate sunt fuga impedit. Ullam aliquid nam adipisci in quae voluptate sunt fuga
impedit.</p>
</div>
</div>
</div>
</div>
</div>