JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gray-box">
  <div class="yellow-box"></div>
  <p>Ассоциация ментально раскладывает на элементы смысл жизни. Интересно отметить, что гравитационный парадокс рассматривается структурализм.</p>
</div>
<div class="gray-box">
  <div class="yellow-box"></div> 
    <h2>Химия</h2>
    <p>Электронное облако каталитически окисляет голубой гель. Хлорсульфит натрия, в рамках ограничений классической механики, расщепляет гетероциклический бромид серебра.</p>
    <ol>
      <li>ту</li>
      <li>лу</li>
      <li>ла</li>
    </ol>
    <p>
    Рутений, как бы это ни казалось симбиотичным, случайно распознает нуклеофил в том случае, когда процессы дициклизации невозможны. Индикатор восстанавливает атом.
    </p>
</div>

CSS

body {
  border: 1px solid gray;
  padding: 10px;
}
.gray-box {
  background-color: #EFEFEF;
  border: 1px solid gray;
  padding: 10px 10px 10px 170px;
  font-size: 14px;
}
.gray-box::after { 
  content: "";
  clear: both;
  display: block;
}
.gray-box + .gray-box {
  margin-top: 10px;
}
.yellow-box {
  background-color: #FAFB9D;
  border: 1px solid gray;
  float: left;
  width: 150px;
  height: 150px;
  margin-left: -160px;
}
.gray-box p:first-of-type,
.gray-box h2:first-of-type { /*h1,h3,img...*/
  margin-top: 0;
}