JSFiddle - React, Tailwind, and code Playground

HTML

<p class="note-container">
This is some text with a <span class="note" desc="Style me!">marginal note</span>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur, lorem ut pretium malesuada, diam nunc interdum tellus, id venenatis tortor nulla eget lorem. Aenean pharetra imperdiet aliquam. Proin luctus nibh nec lobortis mattis. Sed egestas erat et urna egestas faucibus. Fusce porttitor dapibus tincidunt. Integer congue mattis nulla iaculis mollis.
</p>

CSS

.note-container {
  position: relative;
  width: 400px;
}

.note {
  text-decoration: underline;
}

.note:hover::after {
  content: attr(desc);
  position: absolute;
  top: 0;
  left: 440px;
  width: 150px;
  height: 100%;
  border-left: 1px solid black;
  padding-left: 9px;
}