While working on my Angular application, I encountered an issue with designing a side list-group of recent blogs using Bootstrap 4. When the aspect ratio is changed to mobile view, the images resize and become smaller to fit into the div as the title length increases. I would like the title to resize and, if it's too long, break and move to the next line, while keeping the image size constant. Additionally, I want the image to take up the full height of the element. Please refer to the image below for a clearer understanding.
HTML:
<div class="container">
<div class="row">
<div class="col-12">
<h6 class="text-muted">Recent Blogs</h6>
<ul class="list-group" *ngFor="let blog of blogs">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="image-parent">
<a [routerLink]="['/blog', blog.blogId]">
<img src="http://localhost:4000/{{blog.imagePath}}" class="img-fluid" alt="lay">
</a>
</div>
<a [routerLink]="['/blog', blog.blogId]">
{{blog.title}}
</a>
</li>
</ul>
</div>
</div>
</div>