Timeline crossing

The signature is the crossing. One currentColor rule runs the whole height of the section down its exact centre and never breaks. The copy crosses it six times: 1904 hangs left of the line and is set right-aligned hard against it, 1931 hangs right and is set left-aligned out of it, and so on to 2023. The eye zig-zags down a mark that does not move, and that alternation is what makes six entries read as a history rather than as a list of six things. A single-sided rail reads as an index; a crossing reads as time passing.

The rule also runs past both ends. The first entry takes a spacing-80 top padding and the last a spacing-80 bottom padding, so the line exists for a stretch where there is nothing beside it at either end. A history that begins exactly at its first entry and stops exactly at its last one is a closed list. This one is a length cut out of something longer, and the lede says so.

How the rule is built, and why it is unbroken

There is no rail element and no separator block. Each entry is a core/columns of two 50% columns; the left column of every row carries a border-right of currentColor 1px, and consecutive rows carry no vertical block gap ("blockGap":{"top":"0px","left":"0px"} on the columns, "0px" on the section group), so those six borders touch and form one line. The horizontal gap is 0px as well, which is what puts the border at the exact centre rather than half a gutter off it. All the spacing between entries comes from each entry's own top and bottom padding, never from a gap between rows. This is the technique timeline-rail uses for its single-sided rail, applied to a two-sided one.

The half that only works here: an entry on the RIGHT puts its copy in the right column and leaves the left column completely empty, holding nothing but its border. A flex column stretches to the height of its row, so the empty column is as tall as the copy beside it and the rule carries on through rows it has no content in. That is why the border is on the column itself rather than on a group inside it, which is where timeline-rail puts it: a group sizes to its content, and an empty group is a gap in the line.

What happens at 390

The columns do not stack. isStackedOnMobile: false, because stacking would destroy the composition in a way no honest description could dress up: the empty column would collapse to zero height and the rule would vanish on every right-hand entry, leaving three orphaned lines down the right edge of the phone. So the crossing is kept at every width. At 390 that means two 179px halves with the rule between them and the copy alternating either side of it, which is tighter than a phone would ideally set it: roughly 22 characters to the line, against about 40 in a full-width section. It reads, it is still recognisably the same design, and the entries are written short for that reason. If your entry copy runs to three or four sentences, the phone rendering is where you will see it first. A four-digit year at the clamp() floor needs nothing like the width available, so the years are never the problem.