インライン要素での文頭を揃えた折り返し方法について

解決したいこと：

画像のようにtitle部分とtext部分を横並びにたいと思っています。

前提条件：
ブラウザはIE
titleはinline-block要素、textはinline要素です。
この要素については変更できません。。
「文章がここに」と「入ります」は同一のタグ内に収めたいです。
（「文章がここに」と「入ります」の間には<br>タグのみが望ましいです）

現状：

text部分のinline要素化でtilteの下に回り込んでいます。
これを上の画像のように横並びにしたいと思っています。

試したこと
ほとんどありませんが、上の前提条件を満たして解決したいです。

回答よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

ieは投げ捨てたい…とりあえずflex。

html
1<html>
2
3  <head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6  </head>
7
8  <body>
9    <div style="display: flex;">
10      <h1>タイトル</h1>
11      <span>文章が <br> ここに入ります。</span>
12    </div>
13  </body>
14
15</html>