Как выровнять хедеры по высоте (скрины внутри)?

Question

[BohdanK]

Вот как нужно сделать:
Вот что на данном этапе:
То есть, нужно выровнять хедеры статьи целиком, чтобы контент статьи не сползал вниз и при этом чтобы хедеры были не фиксированной высоты. Какие есть "красивые" варианты решения этой задачи, чтобы верстка в дальнейшем при заполнении не сломалась? В css флекс-разметка.

<section class="container-news">
				<article class="news-1">
					<header class="header-news">
						<h1>Mauris et dui sed justo placerat tristique.</h1>
						<h2>11.07.2014</h2>
					</header>
					<img src="images/news-image1.png" alt="news-photo">
					<p>текст статьи</p>
					<a href="#ReadMore" title="readmore"><h3>Read more</h3></a>
				</article>
				<article class="news-2">
					<header class="header-news">
						<h1>Proin vehicula nibh massa</h1>
						<h2>11.06.2014</h2>
					</header>
					<img src="images/news-image2.png" alt="news-photo">
					<p>текст статьи</p>
					<a href="#ReadMore" title="readmore"><h3>Read more</h3></a>
				</article>
</section>

Answer 1

[Stalker_RED]

Таблица, например.

Или display: table jsfiddle.net/bfz209dd (только наверное нужно заголовки с контентом объединить через table-col, но мне лень)

Наверное, можно и через flexbox.

Comments

[BohdanK]

Да, тоже думал об этом, но тогда придется весь этот блок делать таблицей, судя по всему это самый нормальный вариант.

[al3ch5]

Попробуй, тогда через min-height, max-height.

Answer 2

[al3ch5]

Вставь неразрывный пробел, или br, и будет счастье!

Comments

[BohdanK]

Не подходит, если заголовки будут в одну строку, тогда правая статья сползет вниз. Мне нужно чтобы было универсально.

Answer 3

[Uwe_Boll]

flexbox

Comments

[BohdanK]

И? Чем тут флексбокс поможет, у меня и так на флексбоксах все.