Столбец направления Flexbox - ширина столбца такая же, как у второго столбца

Question

Я пытаюсь создать 3 строки одинаковой ширины (на основе 2-й строки).

Первая строка: текст Второй ряд: изображение Третий ряд: Текст

Ширина изображения не должна быть больше реальной ширины изображения. Но его можно сжимать (поэтому он не шире ширины экрана - уже понял). Другие строки (текстовые строки) должны быть такой же ширины, как изображение. Я старался изо всех сил с flexbox, но, похоже, не работает.

HTML:

<div class="content">
            <div class="first">
                Text Text Text Text
            </div>

            <img class="second" src="https://s3.amazonaws.com/media.eremedia.com/uploads/2012/08/24111405/stackoverflow-logo-700x467.png" />

            <div class="third">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        </div>

CSS:

.content {
  display: inline-flex;
  flex-direction: column;  
}

.first {
  background-color: green;
  display: inline-block;
}

.second { /* image */
  align-self: center;
  border: 1px solid red;
  max-width: 100%;
}

.third {
  display: inline-block;
  overflow-wrap: break-word;
  background-color: green;
}

JSFiddle: http://jsfiddle.net/djb7z2m3/7/

Есть другой способ или я что-то пропустил? Пробовал много, как flex-base / grow / shrink и выравнивает материал, но не получил ожидаемого результата.