JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="item">
ширина и высота желтых блоков определяется заключенным в них текстом (то есть не задана жестко). Мы должны иметь возможность поменять числа или добавить еще несколько строчек, не меняя css. У желтых блоков есть поля размером 10px. У синего блока поля размером 10px.
для переноса строк можно использовать
</div>
</div>

CSS

.container {
	width: 40%;
	padding:0px 10px;
	min-width: 100px;
	max-width: 200px;
	max-height: 600px;
	margin:0 auto;
	border: 1px black solid;
	text-align: left;
}