JSFiddle - React, Tailwind, and code Playground

HTML

<article>
  <p>Основной текст размером 14px. Могущественный король Лир,  почувствовав приближение старости,  решает переложить бремя власти на плечи трех дочерей: Гонерильи,  Реганы и Корделии,  поделив между ними свое царств</p>
  <aside>Примечание с размером текста 10px.</aside>
  <p>Король хочет услышать от дочерей,  как они его любят, «чтоб при разделе могли мы нашу щедрость проявить».</p>
  <aside>Примечание с размером текста 10px.</aside>
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
  <aside>Примечание с размером текста 10px.</aside>
  <h2>Заголовок</h2>
  <aside>Примечание с размером текста 10px.</aside>
  <img src="https://webref.ru/example/image/winnie.png">
</article>
<p>
<img src="https://webref.ru/example/image/winnie.png">
</p>

CSS

article {
  border: 1px solid gray;
  padding: 10px;
  font-size: 14px;
  color: #2F3F77;
}
article::after { 
  content: "";
  clear: both;
  display: block;
}
aside {
  float:left;
  width: 100px;
  font-size: 10px;
}
p, ul, ol, h1, h2, h3, h4, h5, h6, img {
  margin-left: 110px;
}
article > *:first-child {
  margin-top: 0;
}
article > *:last-child {
  margin-bottom: 0;
}
aside + * {
  margin-top: 0;
}