Reduce div width to size of child paragraphs and image

Issue

So I have this kind of structure:

<div class="caption">
    <img src="...">
    <p>Something</p>
    <p>SomethingElse</p>
    <p>SomethingElseAgain</p>
</div>

Every paragraph MUST be in its own line, justified to the left, and my .caption div must not take any more horizontal space than its children need.

I tried with .caption { display: inline-block; } but that doesn't reduce the caption div at all.

I tried adding float: left to div.caption children, but all <p> tags got jumbled in one line.

How should I do this? I'm using plain html+css

Solution

In modern browsers you can simply use fit-content:

.caption {
  border:1px solid red;
  width:fit-content;
}

<div class="caption">
    <img src="...">
    <p>Something</p>
    <p>SomethingElse</p>
    <p>SomethingElseAgain</p>
</div>
Something else

Answered By - Omid