keep separate text on the same line as div tag

Question

I have am using CSS to sytle part of my text font to bold. But I don't want the whole line to be bold. Just part of the text. How can I achieve this? Here is my code:

HTML

<div>
   <div id="titleLabels">Revision:</div> 1.0 draft A
</div>

CSS

#titleLabels 
{
   font-weight: bold;
}

The output of this is this:

This is not what I want. I want the "1.0 draft A bit to be inline with the bit that says Revision".

How can I go about doing this?

Answer 1

Just add display:inline to #titleLabels:

#titleLabels {
    font-weight: bold;
    display:inline;
}

<div>
    <div id="titleLabels">Revision:</div>1.0 draft A
</div>

Divs by default are block level elements and will take up the full width of their parent element unless you alter that.

A more logical solution would be to not use divs on the revision text and instead use either <strong>, <b> or a <span> with the font-weight styled.

#titleLabels {
  font-weight: bold;
}

<div>
  <b>Revision:</b>1.0 draft A
</div>
<div>
  <strong>Revision:</strong>1.0 draft A
</div>
<div>
  <span id="titleLabels">Revision:</span>1.0 draft A
</div>

Answer 2

Use display:inline-block

#titleLabels 
{
   font-weight: bold;
    display:inline-block;
}

<div>
   <div id="titleLabels">Revision:</div> 1.0 draft A
</div>