JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        
        <table>
            <tr>
                <td class="comments">
				    <span id="dog" class="element note">Note for dog</span>
                    <span id="cat" class="element note">Very
                      large
                      <br/>
                      note
                      <br/>
                      for
                      <br/>
                      cat</span>
                    <span id="horse" class="element note">Note for horse</span>
                    <span id="lion" class="element note">Note for lion</span>
                    <span id="tiger" class="element note">Note for tiger</span>
                    <span id="elephant" class="element note">Note for elephant</span>
                  
                  I am not a note, but I am nevertheless here.
		         </td>
                <td>
                  nessedusqui perstio, traturis dolosse quid tamut advellab es peris caremperaec treputem Lata legris, ne cur, quem doluptatias sipicipsin elendum, sendam, borum verisplibeamquerfrae aut hocluide nata od hoc tempe volego do, spos suem rem re mint. Sedum idius curposcribusango num sipis do se vergo tas
                  nessedusqui perstio, traturis dolosse quid tamut advellab es peris caremperaec treputem Lata legris, ne cur, quem doluptatias sipicipsin elendum, sendam, borum verisplibeamquerfrae aut hocluide nata od hoc tempe volego do, spos suem rem re mint. Sedum idius curposcribusango num sipis do se vergo tas
            <span id="dog_anchor" class="reference">Dog</span>
            <span id="cat_anchor" class="reference">Cat</span>
            <span id="horse_anchor" class="reference">Horse</span>
            esipsi sunturohab inpro; 
                    <span id="lion_anchor" class="reference">Lion</span>
            <span id="tiger_anchor" class="reference">Tiger</span>
            <span id="elephant_anchor" class="reference">Elephant</span>
                  
          ata legris, ne cur, quem...

CSS

body {max-width:30em;}
td { vertical-align:top; }
.comments { width: 8em; }
.reference { color:blue;font-weight:bold;font-size:1.3em; }
.note { color:yellow; background-color:black; display:block; margin:0.4em; }

JavaScript

function move()
          {
           $('span[class*="note"]').each(function (index, value)
            { 
              var my_id = $(this).attr('id');
              var element_ref = document.getElementById(my_id + "_anchor"); // get reference element
              var pos_of_ref = element_ref.offsetTop; // get position of reference element
             $(this).css('top', pos_of_ref); // set own position to position of reference element
             });
           }
		  
$( document ).ready(function() {
 move();
});		

$( window ).resize(function() {  
 move();
});