JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  Основной текст размером 14px. Могущественный король Лир,  почувствовав приближение старости,  решает переложить бремя власти на плечи трех дочерей: Гонерильи,  Реганы и Корделии,  поделив между ними свое царство.
</p>
<p data-aside="Примечание с размером текста 10 px.">
  Король хочет услышать от дочерей,  как они его любят, «чтоб при разделе могли мы нашу щедрость проявить».
</p>

CSS

body {
  border: solid 1px grey;
  color: #4B5989;
  width: 330px;
  padding: 0 10px;
  font-size: 14px;
}

p:hover::before {
  position: absolute;
  margin-left: -110px;
  width: 100px;
  font-size: 10px;
  content: attr(data-aside);
}

p {
  margin-left: auto;
  max-width: 200px;
  padding: 5px 10px;
}