Javascript 如何使段落在浮动标题后流动，从包装标题的最后一行开始

我有一个页面，只能在mobile Safari中查看。我试图达到一定的效果，以配合印刷出版物。我已经非常接近了，但这最后一个细节

在我的页面中，我有如下HTML标记：

<section>
  <h2>Header</h2>

  <p>A long paragraph...</p>
</section>

section {
  padding-left: 200px;
  width: 700px;
}

h2 {
  float: left;
  width: 180px;
  margin-left: -200px;
}

Header          A long paragraph, blah blah blah...
                blah blah blah...

This is a       A long paragraph, blah blah blah...
longer header   blah blah blah...

This is a
longer header   A long paragraph, blah blah blah...
                blah blah blah...

结果是这样的：

<section>
  <h2>Header</h2>

  <p>A long paragraph...</p>
</section>

section {
  padding-left: 200px;
  width: 700px;
}

h2 {
  float: left;
  width: 180px;
  margin-left: -200px;
}

Header          A long paragraph, blah blah blah...
                blah blah blah...

This is a       A long paragraph, blah blah blah...
longer header   blah blah blah...

This is a
longer header   A long paragraph, blah blah blah...
                blah blah blah...

这是完美的。但是，如果标题中的内容稍长一些，则可能如下所示：

<section>
  <h2>Header</h2>

  <p>A long paragraph...</p>
</section>

section {
  padding-left: 200px;
  width: 700px;
}

h2 {
  float: left;
  width: 180px;
  margin-left: -200px;
}

Header          A long paragraph, blah blah blah...
                blah blah blah...

This is a       A long paragraph, blah blah blah...
longer header   blah blah blah...

This is a
longer header   A long paragraph, blah blah blah...
                blah blah blah...

然而，我希望它从标题最后一行开始，如下所示：

<section>
  <h2>Header</h2>

  <p>A long paragraph...</p>
</section>

section {
  padding-left: 200px;
  width: 700px;
}

h2 {
  float: left;
  width: 180px;
  margin-left: -200px;
}

Header          A long paragraph, blah blah blah...
                blah blah blah...

This is a       A long paragraph, blah blah blah...
longer header   blah blah blah...

This is a
longer header   A long paragraph, blah blah blah...
                blah blah blah...

---

我想我可以用JavaScript解决这个问题，但是我想用尽可能少的干扰的方式来修复它，或者纯粹用CSS，或者对标记进行最小的更改。除此之外，还有关于JavaScript解决方案的想法吗？谢谢

这只能使用CSS来完成。也不需要浮动：

section {
  width: 700px;
}

section p {
  padding-left: 200px; 
  margin-top: -20px
}

section h2 {
  padding-right: 500px; 
  margin-bottom:0
}

您的HTML保持不变