JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://placehold.it/200x150">

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

<p class="note">Примечание с размером 10px</p>

<ol>
    <li>Первый пункт</li>
    <li>Второй</li>
    <li>Третий</li>
</ol>

<p class="content">
	Король хочет услышать от дочерей,  как они
    его любят, «чтоб при разделе могли мы нашу щедрость проявить».</p>

CSS

body{
	color:#2f3f77;
	font-size: 14px;
}
p.content {
	padding-left: 120px;
	padding-right: 10px;

}

p.note {
	float:left;
	font-size: 10px;
	width: 100px;
	margin-top: 0px;
	margin-left: 10px;
	margin-right: 10px;
	clear:both;
}