How do I make the width of a container <p> tag match the width of the <span> it contains?

Question

I have a paragraph that contains a span. The <p> tag's width is much wider than the <span> it contains, but I would like it to be only as large as its child <span>.

<p>
    <span>Some text.</span>
</p>

I tried width: auto but that doesn't seem to work.

Answer 1

use display:inline-block; with p element.

p{
    display:inline-block;
}

Js Fiddle Example