My div (highlighted with background yellow) is expanding horizontally i.e., it's width is increasing. I think it is increasing to the full width of the image i.e., 800px + padding. How can I make sure this div's width and height is equal to the shrunk containing image? So that the next element with text- "Test" is displayed right next to it. Thanks!
<script src="https://cdn.tailwindcss.com/3.4.3"></script><div class="flex max-h-96"><div class="flex w-fit bg-yellow-100 p-2"><img src="https://placehold.co/800x1000" alt="MAIN_IMAGE" /></div><div>Test</div></div>