[Jellby]

This is one of the things XHTML+CSS cannot easily do (yet). For the record, LaTeX has a hard time here too, it's far from trivial to do it in a robust way.

I would probably try something like:

<div class="block">

<div class="text">
<p>Beloved, popular, respected among his fellows, victorious over
discontent * and lust; over spiritual danger and dismay;
will bestow upon him the ecstasy of contemplation; † will
enable him to reach with his body, and remain in, those stages of
deliverance which are incorporeal and pass beyond phenomena;</p>
</div>

<div class="notes">
<p>* "Were mankind murderous or jealous upon you my brother, my
sister? I am sorry for you, they are not murderous or jealous upon me,
all has been gentle with me, I keep no account with lamentation (what
have I to do with lamentation?)" [193: 71]. "The holy breath kills
lust, passion and hate" [M. C. L. infra].</p>

<p>† "Yet O my soul supreme! Knowest thou the joys of pensive
thought? Joys of the free and lonesome heart, the tender, gloomy
heart?" [193: 147].</p>
</div>

</div>

with:

div.block {
  display: table-row;
}
div.text, div.notes {
  display: table-cell;
  width: 50%;
}

That would let you "easily" change the format from tabular to something else. Note, too, that <p></p> elements cannot have other block elements inside in XHTML.