<style>
  * { box-sizing: border-box }
  
  article {
    /* Задаём систему координат
    *  для абсолютного позиционирования
    *  сайдноутов */
    position: relative;
  }
  
  p,
  ul,
  ol {
    width: 75%;
    padding-right: 20px;
  }
  
  .sidenote {
    /* Задаём сайдноутам ширину, равную
    *  ширине поля, и позиционируем их
    *  по правому краю родителя */
    width: 25%;
    position: absolute;
    right: 0;
    /* Уменьшим кегль и подтолкнём сайдноут вниз,
    *  чтобы выровнять по базовой
    *  с основным текстом */
    font-size: .8em;
    margin-top: .0625em;
  }
  
  /* На мобильных экранах ставим всё в одну колонку */
  @media screen and (max-width: 761px) {
    p,
    ul,
    ol,
    .sidenote {
      width: auto;
      position: static;
    }
  }
</style>

<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 class="sidenote">
    See
    <a href="https://edwardtufte.github.io/tufte-css/">
      Tufte CSS by Dave Liepmann
    </a>
  </p>

  <p>
    Sidenotes are a great example of the web not being like print.
    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>
</article>