Сделать так, чтобы заголовок занимал ширину изображения

Question

Рассмотрим следующий пример:

<figure>
  <img height="100px" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png">
  <figcaption>Very long caption that should take the width of the image</figcaption>
</figure>
<div>This text should appear below the whole figure</div>

Есть ли подход, основанный только на css, при котором заголовок принимает ширину изображения, которая будет работать в большинстве браузеров, так что нет, пожалуйста, не используйте CSS?

РЕДАКТИРОВАТЬ: решение без внутренней ширины (минимальное содержание).

РЕДАКТИРОВАТЬ: я добавил текст под рисунком, который также должен быть под заголовком.

Answer 1

Обновленный код https://jsfiddle.net/harshapache/sLeab4zg/

   figure {
      position: relative;
      display: table-caption;
   }

Answer 2

figure{
    display: table;
    width: 1px;
}