◆ flexbox で縦に並べる
◆ align-items を stretch にして inline 表示したいところだけ align-self で flex-start

背景色など別スタイルの都合でインライン要素にしたいということがあります
でも インラインにすると その前後で改行されません
前後がブロック要素になっていればいいですがそうとは限りません

<!doctype html>

<style>
h1 {
background: #ffdde3;
}

h2 {
background: #ffe9bf;
display: inline-block;
}
</style>

<article class="article">
<h1>H1</h1>
<p>text in p tag</p>
<h2>H2</h2>
<p>text in p tag</p>
<h1>H1</h1>
text text
<h2>H2</h2>
text text
</article>

2 つめの h2 では行の途中に入っています

h2 自体は block 要素にして 中に span を入れるのがベストなつくりだと思います
しかし h2 前後を p タグにできないことがあるのと同様 HTML 構造は固定というときもあります
実際のところは markdown のように別のドキュメント記法から HTML 生成するツールの都合です
JavaScript でパースして無理やり変更することも可能ですが 既存部分が多くてそれらを 1 つ 1 つ修正するのはとても大変です

良い方法がないかを考えていたら flexbox が役立ちそうです
縦並べにして 基本は stretch で横幅いっぱいにします
h2 だけ align-self で flex-start にすれば左寄せになって自動で広がらないです
flexitem なので block でも inline-block でも縦に並んで横が余っていても横には来ません

<!doctype html>

<style>
h1 {
background: #ffdde3;
}

h2 {
background: #ffe9bf;
align-self: flex-start;
}

.article {
display: flex;
flex-flow: column;
align-items: stretch;
}
</style>

<article class="article">
<h1>H1</h1>
<p>text in p tag</p>
<h2>H2</h2>
<p>text in p tag</p>
<h1>H1</h1>
text text
<h2>H2</h2>
text text
</article>