Независимые блоки
 

Здравствуйте, уважаемые форумчане!
Я работаю frontend разработчиком, опыт чуть более года, немало задач было решено, но с этой задачей я справится не смог...
Есть 2 блока, высота которых зависит от контента, а ширина равна 100% родителя, по дом структуре они "соседи".
По задумке один из них содержит картинку, второй наполнен текстом, при этом объём текста и высота картинки заранее нам неизвестны. Нужно их наложить друг на друга таким образом, чтобы родитель выбирал большего из двух детей, и принимал значение его высоты.
Например:

<div class="parent">
     <div class="image">тут будет img с картинкой</div>
     <div class="text">тут будет пара абзацев</div>
</div>

В результате мы должны получить "пару абзацев" на фоне картинки. Конечно вы сразу скажите дай блоку с классом "parent" position:relative, а блоку "image" position:absolute, и будете неправы. А что если ваша картинка занимает 600 по высоте, а текст всего 200? Ведь по условию задачи, при таком раскладе блок "parent" должен принять высоту в 600. А если текст 900 а картинка 300, "parent" примет высоту 900.
Самое интересное, что я могу решить эту задачу с помощью JS, однако в моей ситуации это недопустимо.
Прошу Вас помочь, ибо я уже сломал голову...

Если коротко - получается что родительский блок должен принимать высоту большего из двух дочерних блоков. При том что дочерние блоки наложены друг на друга.

Спасибо за ответ, вы первый кто предложил реальное решение, но беда в том что по условию задачи, дети занимают 100% ширины родителя)

p.s. пожалуйста прочтите внимательно первый пост

50% на 100% не пробовали менять?
https://jsfiddle.net/3rm2p206/

Точно! я попробывал но только в одном месте, забыл сменить на 100% отрицательный марджин, благодарю Вас, как только внедрю это в свой проект, обязательно здесь отпишу!

Решить этот вопрос мне всё же удалось, благодоря примеру Nexus, и ещё одному человеку на другом форуме.
В итоге оба приёма используют отрицательное значение горизонтального марджина, первый пример использует flex для родителя, второй построен на свойстве float.
1 - https://jsfiddle.net/eu38e1so/26/
2 - https://jsfiddle.net/eu38e1so/24/

Большое тебе спасибо! Карму+

Думаю тема закрыта.

Ну если только ещё использовать сетку display: grid и наложить элементы друг на друга

https://jsfiddle.net/eu38e1so/36/

P. S. Пример с display: flex выше имеет побочный эффект: если не поддерживается в браузере, то текст уежает за экран и недоступен