inline-blockを改行させたい

前提

ページタイトル作成中です。
レスポンシブで、ｓｐ用はh1のspanタグを上下中央寄せ、
ｐｃ用では上下は中央で、左を50ｐｘ開けて左寄せにしたいです。
spaｎは改行し、２行で表示させたいです。

spanタグをinline-blockにし、対象対象のインライン要素（.page-title__sub,
.page-title__main）の親要素（.page-title）で「line-height:200px」と高さを固定することで、内包される対象は自動的にその行内で、高さ方向の中央付近に配置しました。しかし２行にならず、１行になってしまいます。
ｂｒタグを入れるとpage-title__mainが消えてしましました。

初歩的な内容ですが、わからないのでお願いします。
display:flex;をできれば使わずに実装させたいです。

該当のソースコード

HTML

<div class="page-header-lg page-header-lg__service"> <h1 class="page-title"> <span class="page-title__sub">Service</span> <span class="page-title__main">事業案内</span> </h1> </div>

css

/*---------------------------------------- ページタイトル ----------------------------------------*/ /*ページタイトル(大・中・小共通) --------------------------------------*/.page-title { letter-spacing: 0.2em; text-align: center; line-height: 200px;}.page-title__sub,.page-title__main { display: inline-block; vertical-align: middle;}.page-title__sub { color: #37952F; font-size: 20px; font-family: 'Oswald', sans-serif; font-weight: 700; line-height: 0.2; }.page-title__main { font-size: 30px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; line-height: 1;}@media screen and (min-width: 992px),print { .page-title { text-align: left; margin-left: 50px; line-height: 460px;} .page-title__sub { font-size: 24px; line-height: 0.3;}.page-title__main { font-size: 48px; line-height: 1.6;}} /*ページヘッダー領域 --------------------------------------*//*大*/.page-header-lg { background-color: gray; background-size: cover; height: 100vh; background-position: center center; max-height: 200px;}.page-header-lg__service { background-image: url(../img/bg_header_service.jpg);} @media screen and (min-width: 992px),print { .page-header-lg__service { max-height: 460px; }}

試したこと

ネットで調べました。
https://www-creators.com/archives/391#i-2

補足情報（FW/ツールのバージョンなど）

レスポンシブはモバイルファーストです。