CSS place elemtent at position of another (NOT parent) - html

Question

I have an XML file which consists mostly of text. However, there are some element in there containing additional information. Let's call these additional information bits "element". In some paragraphs there is none of these, in some paragraph several. Sometimes there are even right after each other. However, in different paragraphs they are always at different positions.
Here's mock up:
<paragraph>
Qui <element>20</element> corti. num sit <element>10</element><element>5</element> igitu pugis quium. quem er Epiendis nessictilluptiudicaribus? qui ipsarent scit verspitomnesse con eiudicitinec tam ret pari Graeperi diurum eo <element>50</element> nebituratam num aerminxeato nilibus. nostereffer est modulceribus, ficantendus anonea Chraectatur, quemodumquae ut pet sum re vivatotertentu vitra cortem nonemod hunturunclia dolum poraectiatiamas rein eximplatorefut egra vartere
</paragraph>
Now I want to transform this XML file into HTML with XSLT. The problem is: The "additonal elements" should appear nowhere in the text, but at a separate column. Like this:
As you can see, the numbers (bearing my "additional information") appear right at the level where they are in the text: "20", "10" and "5" are at the first line, because in the XML source data they are are referenced after the words "Qui" and "sit", which are in the output both at the first line in the text. "50" is right at the level of "eo" nebituram".
How can I achieve this behaviour with CSS?
It is rather easy to put an anchor element in the HTML at this very same position:
eo <a id="some_id"/> nebituratam
Let's say that the "50" is in a span-element
<span stlye="...">50</span>
However, what do I put in the CSS here? Is there a way to state in CSS to place this span right at the level of the anchor with the id "some_id"?
Of course, the anchor can in no way be the parent of the span element.
Honestly, I'm quite sure that my problem is unsolvable without JavaScript or something, but I'd like to avoid skripts wherever I could.

Answer 1

Try This
p{
padding-left:50px;
position:relative;
}
p span{
position:absolute;
left:10px;
top:45%;
font-size:16px;
font-weight:bold;
}
<p>Qui corti. num sit igitu pugis quium. quem er Epiendis nessictilluptiudicaribus? qui ipsarent scit verspitomnesse
con eiudicitinec tam ret pari Graeperi diurum eo <span>50</span> nebituratam num aerminxeato nilibus. nostereffer est modulceribus,
ficantendus anonea Chraectatur, quemodumquae ut pet sum re vivatotertentu vitra cortem nonemod hunturunclia dolum
poraectiatiamas rein eximplatorefut egra vartere</p>