Placing an unknown width element on the right of a centered element without moving it

Question

I have a text element centered with text-align: center;, I want to place another element (a small inline <span>) to the right of it without affecting its position.

Neither of the elements (and especially the span) have a known size, so I can't use an offsetting margin on the left of the text element. Is there a way to do that in pure CSS?

Obligatory code that doesn't work:

<div style="text-align: center;">
    <h3 id="centered-text">My centered text</h3>
    <span class="to-the-right" style="background-color: blue;">BADGE</span>
</div>

Answer 1

how's this?

#centered-text {
    display: inline-block;
}
#to-the-right {
    display: inline-block;
    position: absolute;
    margin-left: 4px;
}

<div style="text-align: center;">
    <div id="centered-text">My centered text</div>
    <div id="to-the-right" style="background-color: blue;">BADGE</div>
</div>

I made your H3 not an H3 because it made the BADGE appear weirdly high above the title, but that could be easily corrected by giving the BADGE an attribute like "top: 10px;"