Как определить размер горизонтального правила, такого как bussproofs, в чистом CSS ⇐ Html

[Anonymous]

Моя цель — разметить доказательства естественного вывода в HTML/CSS, аналогичные приведенным ниже, сгенерированным в LaTeX с использованием пакета bussproofs.

Обратите внимание, как внизу Правило охватывает только ширину его непосредственных предпосылок, а не полностью включает в себя предыдущие производные.
Я не могу воспроизвести это поведение в CSS:

Код: Выделить всё

[data-inference] {
display: flex;
flex-direction: column;
align-items: center;
width: max-content;
}

[data-premises] {
display: flex;
gap: 1em;
align-items: flex-end;
}

[data-separator] {
display: block;
height: 1px;
align-self: stretch;
background-color: currentColor;
margin: 0.2em 0;
}

[data-formula] {
line-height: 1;
}

Код: Выделить всё

A[/i] ∧
[i]B[/i]

[i]B[/i]



[i]A[/i] ∧
[i]B[/i]

[i]A[/i]



[i]B[/i] ∧
[i]A[/i]

Поскольку мои практические знания CSS распространяются только на блочную модель, я не вижу очевидного способа добиться этого, не запутывая семантическую структуру моего HTML.
Я ищу только решения, использующие чистый HTML и CSS; У меня уже есть решение JS.

Подробнее здесь: https://stackoverflow.com/questions/798 ... n-pure-css