JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grey">
  <p>Одна или несколько</p>
  <div class="yellow">
  </div>
</div>
<div class="grey">
<h1>Заголовок</h1>
<p>Одна или несколько</p>
<p>строк текста</p>, 
<p>причём блок текста</p> 
<p>может быть и больше, чем блок слева, а может быть и меньше, как получится, хоть так, хоть так. Одна или несколько строк текста, причём блок текста может быть и больше, чем блок слева, а может быть и меньше, как получится, хоть так, хоть так. Одна или несколько строк текста, причём блок текста может быть и больше, чем блок слева, а может быть и меньше, как получится, хоть так, хоть так. Одна или несколько строк текста, причём блок текста может быть и больше, чем блок слева, а может быть и меньше, как получится, хоть так, хоть так.</p>
  <div class="yellow">
  </div>
</div>

CSS

.grey {
  width: auto;
  min-height: auto;
  margin: 10px;
  padding: 10px;
  border: 1px solid #b0b0b0;
  background: #efefef;
  display: inline-block;
}

.yellow {
  width: 150px;
  height: 150px;
  margin: 0;
  padding: 10px;
  border: 1px solid #b0b0b0;
  background: #fafb9d;
}

p {
  margin: 0 10px 0px 180px;
  float: left;
  font-size: 14px;
}