CSS: how to make a span only as wide as its content

Tags: css,append,html

Problem :

I am using the following code snippet to append a span to another one which work fine so far. The content of the parent span is onyl a name and there is no width defined for any of the spans.

My problem is that the span I append always get placed in a new line instead of directly behind the parent span. What do I have to do that it appears in the same line as the parent span, i.e. directly behind it ?

My function (working):

function myFunction()
{
    var parentID = someID;
    var statusID = 'status' + parentID;

    $('<span/>', {
    id: statusID
    }).addClass('active').appendTo('#'+parentID);
}

Example parent span:

<span class="user" id="someID"><strong>Last Name, First Name</strong></span>

Many thanks for any help with this, Tim

---

Solution :

By default, each and every element is as much wider as its content would take space so you donot need to write any code for that, just remove any code replacing the default width of the element.

What do you want to achieve?

The only issue that I am getting is, that your parent element is more wider than the space it should take. What I mean is that the parent is getting more space, so the child is going a line below the actual place. Something like giving the parent element a limited space as

.parent {
  max-width: someval;
}

.child {
  width: auto;
}

One more thing, how are you executing the function of yours?