Vertically align content in sidebar with links in text [based on Tufte-style comments]

Question

Suppose I have a long text (the font size is customizable, so its preliminary breakdown into parts is not an option) with links in it ([1], [2], ...) and the corresponding comments.

<div id="content>
  <p>Lorem ipsum dolor sit amet, consetetur<span id ="ref1">[1]</span> sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
  </p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<span id ="ref2">[2]</span>
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<span id ="ref3">[3]</span>
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="sidebar">
  <div id="com1">
    should be next to [1]
  </div>
  <div id="com2">
    should be next to [2]
  </div>
  <div id="com3">
    should be next to [3]
  </div>
</div>

Is there a way to align link comments in pure HTML / CSS or is Javascript needed? Backward compatibility is not important.

Comments should always be visible and horizontally aligned. As a bonus, they should allow any form of content, not just plain text.

Also keep in mind that two links can be next to each other so that the second comment pushes off a bit.

, JS. , div .

Answer 1

1)

2) , attr() CSS.

3) , <span> <sup>

4) CSS, .

FIDDLE

!

<sup data-comment="should be next to [1]" id ="ref1">[1]</sup>

CSS

#content
{
    margin-right: 150px;
    counter-reset: section; /* Set the section counter to 0 */
}
sup
{
    font-size: 10px;
}
sup[data-comment]:before
{
    counter-increment: section; /* Increment the section counter */
    content: counter(section);  /* Display the counter */

    position: absolute;
    right:10px;
    width: 130px;
    font-size: 8px;
}
sup[data-comment]:after
{
    content: attr(data-comment);
    position: absolute;
    right:0;
    width: 130px;
    font-size: 12px;
}