如何显示旁边有内联元素、下面有p元素的h1元素?

我问 a question 前面介绍了将编辑/删除链接与h1元素内联的最佳方式。我能够通过给出的答案实现这一点,但我现在有了额外的要求,需要在h1下面显示一段并编辑/删除链接。

到目前为止,我的HTML是这样的:

<div class="product-header">
  <div class="title">
    <h1>Product 1</h1>
  </div>
  <div class="admin">
      (<a href="#">Edit</a> | <a href="#">Delete</a>)
  </div>
  <p class="description">Product 1 is a cool product</p>
</div>

我希望它看起来如下:

产品1 (编辑|删除)
产品1是很酷的产品

…页面其余内容

但我不确定用什么CSS来实现这一点!我所做的一切似乎都把描述段落和标题放在同一行,就像这样:

产品1 (编辑|删除) 产品1是很酷的产品

…页面其余内容

Link to JSFiddle 。