Как получить ширину текста, выдвигаемого изображением?

Question

Иногда сайты настраивают свои статьи таким образом, чтобы связанное изображение размещалось не над текстом статьи, а в верхнем левом углу с текстом вдоль правой стороны.

На приведенном выше снимке экрана изображение помещается в статью, но тег <p> по-прежнему имеет ширину, равную длине родительского элемента div. Я хочу иметь возможность вычислять, когда в первом <p> есть текст, который не сжимается из-за добавленного изображения.

Я пробовал различные методы для вычисления width, включая .offsetWidth, .getBoundingClientRect().width, и каждый раз он возвращает одно и то же 560 значение

Я не уверен, какие еще способы я могу найти в SO или Google. Следует также отметить, что я не контролирую фактическое содержимое страницы. Я просто работаю над содержимым динамически после загрузки страницы.

Я добавил фрагмент описания того, как он настроен на этой странице (опять же, у меня нет контроля над источником).

.lead-img {text-align: center;}

 img.alignleft{
  float: left;
  margin: 0 25px 5px 0;
  padding: 0 0 15px;
 }

    <div class="lead-img">
      <img class="alignleft " style="background-color:lightgreen;height:250px;width:250px;">
     </div>
    <div>
      <span>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
      <p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex</p>
      <p>ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
      </span>
    </div>