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 + margins. 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>2