Notes in the margin

A note belongs to a particular sentence, and a layout that cannot keep the two together has not done the job. The usual approaches both fail in the same way: they put the note where the text happened to reach rather than where the text means.

Here the note is a grid item in the same row as its paragraph, so the browser keeps them level at every width, with no measurement and no script. There is nothing to recalculate on resize because nothing was ever calculated.

Two measures, not one split

The note column is a fixed width rather than a fraction of the page. Give it a fraction and the notes get longer lines as the window grows, which is backwards: the text has its own measure to keep and the note has a different, shorter one. They are two independent decisions that a single split would conflate.

A waterfall dropping from a cliff into a conifer forest in mist — Something that ignores the margin and runs across both columns.

Aligned to the top

A note is aligned to the top of its row rather than stretched or centred. This matters more than it sounds: a two-line note beside a nine-line paragraph, centred, sits halfway down and reads as a comment on the middle of the paragraph rather than on its first sentence.

The same rule is why a note with no paragraph beside it still sits where you would expect, rather than drifting to the centre of whatever space the row happened to have.