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

Question

[vasilseodor]

Есть 2 блока. Как сделать так, чтобы один из них (где изображение ) автоматически расширялся в зависимости от размеров первого блока там где контент)? А блок контента, был ровно по центру от блока с картинкой.

Цель: сделать подобие вот этого:


Но у меня не получается. 1й блок ровненько все, а вот второй на расширяется также как и первый....

<section>
<div class="item"><p style="padding:100px 0px;">1</p></div>
<div class="item img">3</div>
</section>
<style>
.item {width:50%; float:left;}
.img {background: #fff url('http://www.poliblok.ru/uploads/gallery/930-0.jpg') no-repeat;}
</style>

Answer 1

[Marina]

1. Флексбоксы (https://css-tricks.com/snippets/css/a-guide-to-flexbox/, caniuse.com/#search=flexbox)
2. Комбинирование display: table; display: table-cell и пр.