Как сделать чтобы два блока были одинаковой высоты?

Question

[cracker-test]

Подскажите, как при помощи flexbox сделать чтобы соседние блоки растягивались в зависимости от контента?

<div class="container">
		<div class="block">
			<div class="block__content">
				<p>
					Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь, точках запятых. Свою грамматики предложения он текстов текст мир первую, свой раз жизни назад все гор что лучше там?
					Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь, точках запятых. Свою грамматики предложения он текстов текст мир первую, свой раз жизни назад все гор что лучше там?
					Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь, точках запятых. Свою грамматики предложения он текстов текст мир первую, свой раз жизни назад все гор что лучше там?
				</p>
			</div>
			<div class="block__image">
				<div class="block__image-wrapper">
					<img src="image.jpg" alt="Фото куницы">
				</div>
			</div>
		</div>
		<div class="block">
			<div class="block__content">
				<p>
					Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь, точках запятых. Свою грамматики предложения он текстов текст мир первую, свой раз жизни назад все гор что лучше там?
					Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь, точках запятых. Свою грамматики предложения он текстов текст мир первую, свой раз жизни назад все гор что лучше там?
				</p>
			</div>
			<div class="block__image">
				<div class="block__image-wrapper">
					<img src="image.jpg" alt="Фото куницы">
				</div>
			</div>
		</div>
	</div>

.containers{
	margin: 0 auto;
	padding: 0 30px;
	display: flex;
 }

 .block {
	 display: flex;
	 flex-direction: column;
	 flex-direction: column-reverse;
	 margin-top: 50px;
	 padding: 10px;
	 max-width: 800px;
 }

 .block__content {
	 max-width: 50%;
	 padding-top: 15px;
	 padding-right: 15px;
	 font-size: 18px;
	 	 background: red;

 }

 p {
	 margin: 0;
 }

 .block__image { 
	width: 100%;
	height: 100%;
}

.block__image-wrapper {
	background-color: rgb(206, 10, 10);
	width: 100%;
	height: 100%;
}

img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	margin: 0 0 20px 0;
}

Comments

[Александр]

А что конкретно не получается, или может быть код покажете?

[cracker-test]

Александр, нужно чтобы вне зависимости от длины текста в абзаце блоки были одинаковой высоты т.е. если в пером абзаце много текста, а во втором мало, то блоки одного размера все равно

Answer 1

[Александр]