Sidenotes by float

https://bureau.ru/soviet/20210218/

by Gleb Kemarsky

HTML

<article>
  <p>
    One of the most distinctive features of Tufte’s style
    is his extensive use of sidenotes. Sidenotes are like footnotes,
    except they don’t force the reader to jump their eye
    to the bottom of the page, but instead display off
    to the side in the margin. Perhaps you have noticed their use
    in this document already. You are very astute.
  </p>
  
  <p>
    Sidenotes are a great example of the web not being like print.
  </p>
  
  <p class="sidenote">
    Huge note for the second paragraph with a long, important definition or something else useful.
  </p>
  
  <p>
    On sufficiently large viewports, Tufte CSS uses the margin for sidenotes,
    margin notes, and small figures. On smaller viewports, elements that would go
    in the margin are hidden until the user toggles them into view. The goal is
    to present related but not necessary information such as asides or citations
    as close as possible to the text that references them. At the same time,
    this secondary information should stay out of the way of the eye,
    not interfering with the progression of ideas in the main text.
  </p>
  
  <p class="sidenote">
    See
    <a href="https://edwardtufte.github.io/tufte-css/">
      Tufte CSS by Dave Liepmann
    </a>
  </p>
  
  <p class="sidenote">
    One more short sidenote for the same paragraph.
  </p>

</article>

CSS

* { box-sizing: border-box; }

  /* На всех экранах уменьшим 
  *  сайдноутам кегль */
  .sidenote {
    font-size: .8em;
  }

  /* На достаточно просторном экране 
  *  ужмём основной текст и перенесём
  *  сайдноуты вправо */
  @media screen and (min-width: 761px) {
    p,
    ul,
    ol {
      width: 75%;
      padding-right: 20px;

      /* Основной текст плывёт к левому краю */
      float: left;
    }

    .sidenote {
      /* Задаём сайдноутам ширину, равную 
      *  ширине поля */
      width: 25%;

      /* Направляем сайдноуты к правому краю,
      * чтобы слишком длинный сайдноут 
      * не отодвигал последующий абзац
      * и интервалы между абзацами 
      * не нарушались */
      float: right;

     /* Подтолкнём сайдноут вниз, 
      * чтобы выровнять по базовой 
      * с основным текстом.
      * Используем padding, чтобы 
      * не высчитывать margin сайдноута
      * на основе margin основного текста */
      padding-top: .0625em;
    }
  }