JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html, body {
    margin: 0;
    padding: 0;
}
.content {
    padding: 10px;
}
.remark {
    float: left;
    font-size: 10px;
    width: 100px;
    padding-top: 6px; /* ради красоты, а то кажется, будто
    примечание выше соответствующего параграфа */
}
.wrapper {
    margin-left: 110px;
    padding-top: 1px; /* для отменты схлопывания */
}
.container {
    padding-bottom: 10px;
}
.container::after {
    content: "";
    clear: both;
    display: block;
}