I have the following piece of code and I am use bootstrap 5:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/><br><br><div class="list-group-item d-flex flex-row"><div class="flex-column"><h4>A Test Recipe</h4><p>This is simply a test</p></div><div class="flex-row align-self-center justify-content-end"><img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg" alt="A Test Recipe" style="max-height: 50px !important"></div></div>I'm trying to get the image to the end of list-group-item div. I tried using justify-content-end but this has no effect. I also tried align-self-end this also doesn't bring the image to the right side.
And as for the div with the flex-column class I'm trying to vertically center its content. But it's not working either, it should be centered like the image is. I got the image vertically centered by making use of the align-self-center class. However when I apply this class to the div that has flex-column class it doesn't work.
What am I doing wrong?