I've been grappling with this problem for a few days now. Essentially, what I have is the following code for a horizontal card layout where the image appears on the left and the text on the right.
.title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} <div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
<!-- Products -->
<li class="card shadow-none card-fluid mb-3 mb-md-5">
<div class="row">
<div class="col-md-3 col-lg-3 mb-3 mb-sm-0">
<img class="img-fluid rounded"
src="{% img src %}"
alt="Image Description">
</div>
<div class="col-md-9">
<div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0">
<h6 class="h5 mb-2 title">
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede
justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim
justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
dictum felis eu pede mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend
ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
</h6>
<p class="font-size-1">
Text of 20 characters.
</p>
</div>
<div class="card-body p-0 px-0 py-md-0 py-lg-0 py-xl-0 body">
<div class="row">
<div class="col-8 text-left">
<a class="d-inline-flex align-items-center">
<span class="static-rating static-rating-sm d-block mr-2">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star-half-alt text-warning"></i>
</span>
</a>
<span class="d-inline-block">
<h6 class="mt-0 mb-2">4.95/5
<small class="text-white-70">(1.5k+ reviews)</small>
</h6>
</span>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- End Products -->
</ul>
</div>
</div>As demonstrated above, the card consists of two divs. One contains the header displaying large text, while the other provides additional information such as reviews.
Nevertheless, the second div with the card-body class gets pushed down when the text within the h6 class extends beyond a certain length but remains unaffected when it's shorter.
To address this issue, I attempted to limit the text to a maximum of two lines using the CSS properties shown above:
Despite these adjustments, the second div continues to be impacted. How can I prevent the second div from being displaced under these circumstances? Any suggestions would be greatly appreciated. Thank you!