How do I make this image 100% fill the container?

Question

I have the code below. My problem is that if I add too much text, it pushes down the entire row and the image has extra space underneath. How can I make sure that the image always fills out its container and its height adapts to the amount of content in the other column?

Here is an image in case the code snippet does not show exactly what I see.

I am using 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>

Answer 1

try this code:

 .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 h-100"> <img src="https://cdn.pixabay.com/photo/2019/04/07/23/11/content-marketing-4111003__340.jpg" alt="" class="img-fluid h-100"> </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>