Marginal Notes in HTML

aside, .aside {        /* works for "aside" tag and class name "aside" */
 display: inline;     /* prevents parent paragraph from breaking */
 float: right;        /* positions the note to the right of the content */
 position: relative;  /* forces note to be relative its the normal position */
 width: 20vw;         /* limits the width of the marginal note */
 margin-right: -22vw; /* sets the distance away from the body text */
 font-size: 16px;     /* makes font slightly smaller */
}
@media (max-width: 768px) {
  aside, .aside {
    display: block;
    float: none;
    margin: 5% 10% 5% 10%;
    width: 80%;
    font-size: 15px;
  }
}

¹

Gwern² recommends sidenote.js. JavaScript-Free Sidenotes in Hugo

1. Friedman, K. Marginal Notes. https://kennethfriedman.org/thoughts/2019/marginal-notes/ (2019).

2. Branwen, G. Sidenotes In Web Design. (2020).