This is a good start for how things could look when there is a wide window, but let me recommend skipping the vertical line and adding a bit more whitespace between columns, and optionally slightly decreasing the font size or using dark gray instead of black for the sidenotes. When the notes are visible the circled numbers are unnecessary. (Not needing a little asterisk or number is one of the points of side notes.)
However this one can’t really be used in practice yet, because it doesn’t adapt when the width decreases. A publishable-notebook-ready solution should present side notes for wide windows (say anything wider than 700 pts) with the main column narrowing modestly to keep the notes column legible, but then should switch to numbered footnotes (and/or hover or click popup notes) when the window narrows beyond that.
I haven’t done any searching but there might be some existing implementations around the web of width-adapting sidenotes which might be modified to work in a notebook context.
I’m glad people are experimenting here.
I’d love to see more exploration of 2-column notebook layouts, and more layout trickery in general, e.g. right-aligned floating images which slightly push into the main text column, small images/diagrams which can be clicked to expand to fill the column on a wide view or go fullscreen on mobile, …
Coming up with ways to effectively use available space on a large display while reactively supporting small displays is tricky. Maintaining the main narrative flow while allowing readers to fully engage with side content needs a combination of good tooling and careful work by authors.