如何用CSS实现HTML段落与清除后浮动元素的垂直对齐？

我需要用HTML+CSS完成17世纪古籍的文本转录，还原其特殊排版规则：

• 正文列右侧保留宽裕边距，用于放置各类浮动元素（多为数字表格）
• 浮动元素的首行必须与对应段落的末行严格对齐（原文明确要求，需完全保留）

基础场景实现代码 #

多数情况下，以下代码可满足需求：

HTML 结构 #

<main>
  <h1>Test</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua —
     <span class="float">123<br/>456</span></p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua —
     <span class="float">789</span></p> 
</main>

CSS 样式 #

main {
  max-width: 475px;
  padding: 0.5rem;
  border: thin solid black;
  margin: 0 auto;
}
h1 {
  text-align: center;
}
p {
  text-align: justify;
  text-indent: 1.5em;
  padding-right: 0.5rem;
  border-right: thin solid black;
  margin: 0 calc(3ch + 0.5rem) 0 0;
}
span.float {
  float: right;
  clear: right;
  text-align: right;
  text-indent: 0;
  font-variant-numeric: tabular-nums;
  width: calc(3ch);
  margin-right: calc(-3ch - 1rem);
}

上述代码可实现：第一个浮动元素123与第一段末尾对齐，789与第二段末尾对齐，且第一个多行浮动元素（123、456）可在第二段开头旁侧正常显示。

特殊场景问题 #

当遇到大浮动元素搭配后续短段落的情况时，古籍排版会在短段落上方添加空白，示例场景代码如下：

问题场景 HTML #

<main>
  <h1>Test</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua —
     <span class="float">123<br/>456<br/>789</span></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit
     sed do eiusmod tempor incididunt — <span class="float">321</span></p>
  <p>Lorem ipsum dolor sit amet.</p> 
</main>

（CSS沿用上述基础样式）

我曾通过插入<p><br/></p>模拟该空白效果，但这种方式无法适配不同屏幕宽度和字体。目前已用jQuery实现临时解决方案，但更倾向于纯CSS方案，要求不能硬编码间距，需自适应不同环境，仅需兼容现代浏览器。

临时jQuery解决方案 #

$(function() {
  $('p').each( function() {
    var floats = $(this).find('.float');
    var nextp = $(this).next('p:has(.float)');
    if (floats.length && nextp.length) {
      var f = $(floats[floats.length-1]), n = $(nextp[0]);
      if (f.height() > n.height()) {
        f.css('float', 'none');
        n.css('padding-top', (f.height() - n.height()) + 'px');
        f.css('float', 'right');
      }
    }
  });
});

内容的提问来源于stack exchange，提问作者Richard Smith