JSFiddle - React, Tailwind, and code Playground

HTML

<div class="post">
  <div class="yellow"></div>
  <p>Одна или несколько строк текста размером 14px.</p>
</div>

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

CSS

body {
  border: solid 1px grey;
  width: 350px;
}

.post, .yellow {
  background-color: #EFEFEF;
  border: solid 1px grey;
  clear:both;
  margin: 10px;
}

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

.post:after {
  clear: both;
}

.yellow {
  width: 50px; /*150*/
  height: 50px; /*150*/
  float: left;
  background-color: #FAFB9D;
}

.post > .content {
  margin: 10px;
  margin-left: 72px;
}