JSFiddle - React, Tailwind, and code Playground

HTML

<div class="graybox">
	<div class="yellowbox"></div>
    <div>
	<p>Одна или несколько строк текста размером 14px</p>
    </div>
</div>
<br>
<div class="graybox">
    
	<div class="yellowbox"></div>
   
	<p>Одна или несколько строк текста, причем блок текста может быть и больше,
		чем блок слева, а может быть и меньше, как получится, хоть так, хоть так.</p>
    	<p>Одна или несколько строк текста, причем блок текста может быть и больше,
		чем блок слева, а может быть и меньше, как получится, хоть так, хоть так.</p>
	<p>Одна или несколько строк текста, причем блок текста может быть и больше,
		чем блок слева, а может быть и меньше, как получится, хоть так, хоть так.</p>   
    	<p>Одна или несколько строк текста, причем блок текста может быть и больше,
		чем блок слева, а может быть и меньше, как получится, хоть так, хоть так.</p>
</div>

CSS

.graybox:before, .graybox:after{
content: " ";
display: table;
}

.graybox:after{
	clear:both;
}
div.graybox{
	background-color: #efefef;
	
	
	border:1px solid black;
	padding: 10px;
    padding-left:171px;
	font-size: 14px;
    line-height:normal;
    min-height: 130px;
}



div.yellowbox{
	background-color: #fafb9d;
	width: 150px;
	height: 150px;
	float: left;
	
	margin-left: -160px;
    
    border:1px solid black;
}