Forum How do I...?

Multi-Columns from Bottom to Top

twantzen
Is it possible to have a 2 columns multi-column layout, that doesn’t stake the items from top to bottom, but from bottom to top (see code below and image attached)?

div {
    columns: 2;
}
p {
    break-inside: avoid-column;
}

<div>
    <p>First para ihicium fugia santur, ut re nes rerro con coreped maximil is es accati am sedisciet estis dessed modigenda volore sequam, odigeni cus, ius est eos molorerum es eossimaxime nitin.</p>
    <p>Second para porum inctem estiscipsum dolupta tusapelit, officia aut mos a sitatur, omnis dolorestenis simolupta necessunt.</p>
    <p>Thrid para reptatur solupiet quis mo magnis doluptatur.</p>
</div>


The amount of text inside the <p> tags differs throughout the publication. It’s a description text at the start of each chapter which should vertically align at the bottom of the type area in 2 columns.

I’m at the end of my wisdom and would be thankful for a hint ...

Thanks
Tobias
  1. Bildschirmfoto 2021-01-29 um 10.18.24.png140.0 kB
mikeday
No, we don't have any method to specify bottom column alignment in CSS at the moment, I think the closest you could get is using two column floats, but then you would have to split the text into two chunks yourself.
twantzen
Thanks, Mike, so I have to split the paras and balance the columns by code.

So take this as a feature request: Option to vertical align multi-columns top or bottom.

Thanks,
Tobias