如何将元素适合较小的子宽度？

Question

我要创建此布局： https://i.imgur.com/p9J0ehM.jpg（哈哈，是的，我无法发布图片）

但是我得到的是： https://i.imgur.com/FsT983a.jpg

这几乎就是我的代码现在的样子：

* {
  font-family: "Helvetica Neue";
}
h1 {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 3em;
  text-align: center;
}

hr {
  border: none;
  width: 20em;
  border-top: 1px solid black;
}

h2 {
  font-size: 2em;
  margin-top: 25px;
  text-align: center;
  font-weight: 500;
}

p {
  font-size: .95em;
  font-weight: 300;
}

<div>
    <h1>TITLE</h1>
    <hr>
    <div id="subtitle">
        <h2>Subtitle subtitle subtitle.</h2>
        <p>Lots of text here that must not overflow the subtitle width.</p>
    </div>
</div>

问题是我需要这个长文本不超过字幕宽。基本上，最好的解决方案是使此div#subtitle适应其<h2>子级，但是如果不将<p>设为绝对，似乎是不可能的。