CSS floating annotations with their own flow

Question

Update

I put up a bounty, but a correct answer was never achieved. I have implemented a JS solution that works for me, but I'm not going to mark an answer as correct just yet. If it is possible with just CSS/HTML, I would still love to see it. But the general consensus is that it's not currently possible.

The Goal

CodePen here, runnable snippet at the bottom.

I have some HTML content that I would like to annotate with a small message floating directly above it, on the far left side, kind of like <ruby> annotations (but not exactly). There can be many pieces of content each with their own annotations. The content must follow normal text flow. Here's my current HTML:

<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='content'>It's a bird, </div>
</div>
<div class='item' style='color: green'>
  <div class='annotation'>still no</div>
  <div class='content'>it's a plane, </div>
</div>
<div class='item' style='color: blue'>
  <div class='annotation'>yeah!</div>
  <div class='content'>it's Superman! </div>
</div>
<div class='item' style='color: orange'>
  <div class='annotation'>muahaha</div>
  <div class='content'>Go get the Kryptonite</div>
</div>

Working Example

Below, the sentence It's a bird, it's a plane, it's Superman! Go get the Kryptonite has 4 separate parts (4 pieces of content), each represented by a different color. Each piece of content has its own annotation, displayed in italics above it.

I have this working by making both the content and the annotation float: left and giving annotation a negative margin. This is Example 1 in the CodePen.

Broken Example 1

The problem occurs when the annotation is longer than the content. Below, the annotation of still no has changed to the longer you may be right. The two content lines continue to follow normal inline flow (as desired), but because the annotations are still lined up to the left edge of their content, they overlap.

This is Example 2 in the CodePen.

Broken Example 2

A proposed solution was to use a table with visibility:collapse to do the alignment, which works well at preventing overlap, but it results in extra space after the annotations, in cases where the annotation starts past the left edge of the content.

How It Should Work

I want the annotations to follow their own flow, but without breaking the natural inline flow of the content. See below how the content line is still a single unbroken sentence, but yeah! gets shifted over to the right to allow the long you may be right to have all the room it needs. However, the muahaha corrects back, because it has room to sit directly atop Go get the kryptonite.

I can change both the CSS and the HTML to make this happen, but a CSS-only solution would be optimal. Thanks.

.item {
  margin-top: 20px;
}
.content, .annotation {
  float: left;
  white-space: pre;
}
.annotation {
  margin-top: -25px;
  font-style: italic;
}


h3 {
  clear: both;
  margin: 0;
  padding: 20px 0;
}

td:first-child {
  color: red;
}
td:nth-child(2) {
  color: green
}
td:nth-child(3) {
  color: blue;
}
td:nth-child(4) {
  color: orange;
}

<h3>Working Example</h3>
<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='content'>It's a bird, </div>
</div>
<div class='item' style='color: green'>
  <div class='annotation'>still no</div>
  <div class='content'>it's a plane, </div>
</div>
<div class='item' style='color: blue'>
  <div class='annotation'>yeah!</div>
  <div class='content'>it's Superman! </div>
</div>
<div class='item' style='color: orange'>
  <div class='annotation'>muahaha</div>
  <div class='content'>Go get the Kryptonite</div>
</div>


<h3>Broken Example 1 (note the overlap)</h3>
<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='content'>It's a bird, </div>
</div>
<div class='item' style='color: green'>
  <div class='annotation'>you may be right</div>
  <div class='content'>it's a plane, </div>
</div>
<div class='item' style='color: blue'>
  <div class='annotation'>yeah!</div>
  <div class='content'>it's Superman! </div>
</div>
<div class='item' style='color: orange'>
  <div class='annotation'>muahaha</div>
  <div class='content'>Go get the Kryptonite</div>
</div>

<h3>Broken Example 2 (note the overlap)</h3>
 <table>
  <tr style='font-style: italic'>
    <td>nope</td><td>you may be right</td><td>yeah!</td><td>muahaha</td>
  </tr>
  <tr style="visibility:collapse;"><td>It's a bird, </td><td>it's a plane, </td><td>it's Superman! </td><td>Go get the kryptonite</td></tr>
</table>
<table style="margin-top:-25px;"><tr><td>It's a bird, </td><td>it's a plane, </td><td>it's Superman!</td><td>Go get the kryptonite</td></tr></table>

<h3>How it should look (cheating with positioning)</h3>
<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='content'>It's a bird, </div>
</div>
<div class='item' style='color: green'>
  <div class='annotation'>you may be right</div>
  <div class='content'>it's a plane, </div>
</div>
<div class='item' style='color: blue'>
  <div class='annotation' style='margin-left: 35px'>yeah!</div>
  <div class='content'>it's Superman! </div>
</div>
<div class='item' style='color: orange'>
  <div class='annotation'>muahaha</div>
  <div class='content'>Go get the Kryptonite</div>
</div>

Answer 1

Maybe this will suit you :

<table>
  <tr>
    <td>nope</td>
    <td>you may be right</td>
    <td>yeah it is!</td>
  </tr>
  <tr style="visibility:collapse;">
    <td>It's a bird,</td>
    <td>it's a plane,</td>
    <td>it's Superman!</td>
  </tr>
</table>
<table style="margin-top:-25px;">
  <tr>
    <td>It's a bird,</td>
    <td>it's a plane,</td>
    <td>it's Superman!</td>
  </tr>
</table>