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

[Webast]

Здравствуйте. Подскажите пожалуйста кто знает, как с помощью css реализовать следующее.

У меня на сайте в шапке сделана такая конструкция:

1-я картинка, а справа от нее в столбик 3 слова.
2-я картинка, а справа от нее в столбик 3 слова.
3-я картинка, а справа от нее в столбик 3 слова.

Все эти 3 картинки со словами выстроены в строчку, т.е. если разрешение экрана позволяет, то они располагаются на одном уровне. Если разрешение экрана меньше (например, на смартфоне), то слова в столбике могут располагаться ниже картинки, а не справа от нее. Хотя места справа вроде бы достаточно. Получается не очень красиво.

Код HTML:

<div id="header_image"><img src="/image-1.png" /></div>

<div id="header_text">Текст в столбик 1

<p>Текст в столбик 2</p>

<p>Текст в столбик 3</p>

</div>


<div id="header_image"><img src="/image-2.png" /></div>

<div id="header_text">Текст в столбик 1

<p>Текст в столбик 2</p>

<p>Текст в столбик 3</p>

</div>


<div id="header_image"><img src="/image-3.png" /></div>

<div id="header_text">Текст в столбик 1

<p>Текст в столбик 2</p>

<p>Текст в столбик 3</p>

</div>

Код CSS:

div#header_image {
 float: left;
 padding: 20px 10px 0px 0px;
 display: inline;
}

div#header_text {
 float: left;
 padding: 20px 30px 0px 0px;
 display: inline;
}

Конечно, все три картинки со словами в столбик уместить на одном уровне в строчку не получится при определенном разрешении, да и не надо это. Главное чтобы каждая картинка с ее тремя словами в столбике всегда были на одном уровне в строчку. А вторая картинка с ее тремя словами в столбик ниже, 3-я ниже 2-й...

Посоветуйте что можно в это случае сделать при помощи css? Может достаточно какие-нибудь стили прописать в приведенный код для div header_image и div header_text?

Edited March 11, 2017 by Webast

[Konstantin99]

https://jsfiddle.net/psqh5458/