Refactor notes CSS to flexbox (high interest tech debt)

Description

Identified in this comment.

There is an unholy amount of CSS coupling with the alignment of system notes, user notes, avatars, names, within and without diff files. We regularly run into alignment issues and it's very hard to make changes without possibly breaking other things.

Investigation

• Can we replace the need for margin positioning CSS in notes.scss (example) with flexbox and utility classes?