Vertically aligning HTML paragraphs to cleared floats with CSS - html

Question

I've a slightly odd requirement here. I'm trying to create a HTML + CSS transcript of a seventeenth century book which has a peculiar layout. The pages have a column of text with a generous right-hand margin that contains various floats (many of which are tables of numbers). These floating diagrams line up with the paragraphs of text so that the first line of the float lines up with the last line of the paragraph. (The text makes reference to this fact, so it's important to preserve it.)
Mostly this is easy, as in this example:
<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>
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);
}
This produces something like the following, which is exactly as I want:
The 123 lines up with the end of the first paragraph, the 789 lines up with the end of the second paragraph, and the first float (123, 456) flows alongside the start of the second paragraph.
However, very occasionally, I have a large float and the following paragraph is very short, e.g.
<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 as before.) If this happens, the book adds space above the second paragraph, and I want to replicate this so that it looks a bit like the following (which I've mocked up by inserting <p><br/></p> before the second paragraph):
Is there a way of achieving this in HTML and CSS? I'm not adverse to changing the way I mark up the document, however I'm catering for a variety of screen widths and fonts, so I cannot hard-code spacing based on how much I need in my browser. I'm happy with a solution that won't work in ancient browsers.
Update: To help illustrate what I'm after, here is a quick and dirty solution using jQuery, though I would prefer to avoid using Javascript if at all possible and do it in CSS:
$(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');
}
}
});
});