Вертикальное выравнивание изображения и многострочного текста

Я пытаюсь выровнять изображение и текст по вертикали:

+-------------------------+ -- Viewport
|         Text text text  | 
| +-----+ text text text  | 
| |IMAGE| text text text  | 
| +-----+ text text text  | 
|         text text text  | 
+-------------------------+ 

Это отлично работает, если текст не переносится. Если текст шире, чем ширина области просмотра, он больше не работает. Я думаю, это вызвано установкой display: inline-block:

     
    
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum eirmod tempor invidunt ut labore et dolore 
    

Результат:

+---------------------------------------------------------------------+ -- Viewport
|                                                                     |                                                            
| +-----+                                                             | 
| |IMAGE| text text text text text text text text text text text text | 
| +-----+                                                             |                                                           
|                                                                     | 
+---------------------------------------------------------------------+ 

+-------------------------+ -- Viewport
| +-----+ Text text text  | 
| |IMAGE| text text text  | 
| +-----+ text text text  | 
| text text text text     | 
+-------------------------+ 

Если я попытаюсь переместить элементы, изображение всегда будет сверху, но не по вертикали посередине текста:

    
         
         
            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. 
         
    

Результат:

+-------------------------+ -- Viewport
| +-----+ Text text text  | 
| |IMAGE| text text text  | 
| +-----+ text text text  | 
|         text text text  | 
|         text text text  | 
|         text text text  | 
+-------------------------+ 

Я видел несколько решений этой проблемы, используя html-таблицы или css-таблицы (display: table и display: table-cell), но это не вариант, потому что он должен работать со всеми типами браузеров (настольными и мобильными).

Для этого я не знаю никаких размеров. Ни изображения, ни текста. Поэтому я не могу использовать какое-либо «Решение с полями или дополнениями».

РЕДАКТИРОВАТЬ : Я создал демонстрационную скрипку (на основе той, которую создал NGLN, BTW: Спасибо для этого!), которые показывают результат, который я ищу. Но я пытаюсь заархивировать это без использования display: table-cell ... какие-нибудь идеи?