Is there any way to make the width of a div element the same as the largest width of its children element in html?

Question

My code is as follows:

<div id="latest-text">
    <p id="text-wrapper">
      <span style="display: inline-block;" id="title">ABFDFDFJEKJRKEREJRKE</span>
      <span style="display: inline-block;" id="subtitle">GJKJGKEJKEJFKAJKEJRE</span>
    </p>
</div>

I want to make the width of the #text-wrapper element the larger width of #title or #subtitle element, but it seems that its width is always the same as the #latest-text element. Is there any way to achieve my goal?

Answer 1

Yes you can do that. Set one of the spans to block, and the parent p tag to inline-block. Let the second span be inline.

<div id="latest-text">
  <p id="text-wrapper">
    <span id="title">ABFDFDFJEKJRKEREJRKE long, very long, very long</span>
    <span id="subtitle">GJKJGKEJKEJFKAJKEJRE</span>
  </p>
</div>

css:

#text-wrapper {
  display: inline-block;
}

span#title {
  display: block;
}

See Dabblet: http://dabblet.com/gist/4694336