My objective is to always initiate a line break before a specific element, in this case, the h2 tag:
https://i.sstatic.net/fy80H.png
https://jsfiddle.net/hv0sm40o/3/
html
<div class="columns">
<h2>Jelly pastry chocolate cake pastry</h2>
<p>
Marshmallow cake pie carrot cake donut lemon drops. Candy canes toffee powder cake jelly lollipop lollipop. Oat cake danish cake biscuit lollipop sweet muffin donut chocolate bar. Marshmallow sugar plum caramels jelly beans chocolate bar tootsie roll. Croissant wafer soufflé sugar plum.
</p>
<h2>Marshmallow toffee toffee</h2>
<p>
Chocolate cake dessert tart oat cake liquorice powder. Halvah cotton candy bonbon dessert chocolate chocolate cake. Gummi bears chocolate cake bonbon caramels. Biscuit donut cupcake pastry icing cheesecake cookie. Cake tootsie roll bonbon carrot cake wafer tart jelly-o pudding sesame snaps. Jelly wafer wafer bear claw candy canes marzipan macaroon bear claw. Wafer jujubes dragée gummies donut macaroon liquorice lollipop.
</p>
<h2>Pudding candy dragée sugar plum gingerbread cotton candy sweet roll</h2>
<p>
Pudding fruitcake jujubes lemon drops sweet sweet roll jelly-o cotton candy. Liquorice macaroon powder dragée pastry chocolate cupcake cheesecake brownie. Oat cake cupcake croissant cookie. Bear claw macaroon jelly beans. Soufflé sugar plum sesame snaps jelly beans sesame snaps. Powder oat cake cake dragée cupcake. Jelly biscuit chocolate bar muffin.
</p>
<h2>Danish gummies brownie cupcake muffin cookie tart cake</h2>
<p>
Pie sweet soufflé pie biscuit candy canes dragée brownie sweet roll. Topping muffin gingerbread brownie. Chocolate jelly-o candy bonbon gummi bears marshmallow jelly dragée. Chocolate fruitcake pudding caramels oat cake tart halvah candy canes. Apple pie tart sugar plum pie gummi bears biscuit. Carrot cake fruitcake croissant powder candy. Biscuit lollipop lollipop chupa chups gummi bears sweet jujubes. Marzipan cotton candy lollipop gummi bears tiramisu jujubes ice cream cotton candy dragée. Ice cream danish soufflé halvah.
</p>
</div>
The following scenario is not successful because the column breaks and overflows to the right...
<div class="columns fails">
<h2>Jelly pastry chocolate cake pastry</h2>
<p>
Marshmallow cake pie carrot cake donut lemon drops. Candy canes toffee powder cake jelly lollipop lollipop. Oat cake danish cake biscuit lollipop sweet muffin donut chocolate bar. Marshmallow sugar plum caramels jelly beans chocolate bar tootsie roll. Croissant wafer soufflé sugar plum.
</p>
<h2>Marshmallow toffee toffee</h2>
<p>
Chocolate cake dessert tart oat cake liquorice powder. Halvah cotton candy bonbon dessert chocolate chocolate cake. Gummi bears chocolate cake bonbon caramels. Biscuit donut cupcake pastry icing cheesecake cookie. Cake tootsie roll bonbon carrot cake wafer tart jelly-o pudding sesame snaps. Jelly wafer wafer bear claw candy canes marzipan macaroon bear claw. Wafer jujubes dragée gummies donut macaroon liquorice lollipop.
</p>
<h2>Pudding candy dragée sugar plum gingerbread cotton candy sweet roll</h2>
<p>
Pudding fruitcake jujubes lemon drops sweet sweet roll jelly-o cotton candy. Liquorice macaroon powder dragée pastry chocolate cupcake cheesecake brownie. Oat cake cupcake croissant cookie. Bear claw macaroon jelly beans. Soufflé sugar plum sesame snaps jelly beans sesame snaps. Powder oat cake cake dragée cupcake. Jelly biscuit chocolate bar muffin.
</p>
<h2>Danish gummies brownie cupcake muffin cookie tart cake</h2>
<p>
Pie sweet soufflé pie biscuit candy canes dragée brownie sweet roll. Topping muffin gingerbread brownie. Chocolate jelly-o candy bonbon gummi bears marshmallow jelly dragée. Chocolate fruitcake pudding caramels oat cake tart halvah candy canes. Apple pie tart sugar plum pie gummi bears biscuit. Carrot cake fruitcake croissant powder candy. Biscuit lollipop lollipop chupa chups gummi bears sweet jujubes. Marzipan cotton candy lollipop gummi bears tiramisu jujubes ice cream cotton candy dragée. Ice cream danish soufflé halvah.
</p>
</div>
css
* {
margin: 0;
}
.columns {
columns: 2;
column-gap: 40px;
column-rule: 1px outset #ebebeb;
column-rule-style: solid;
column-width: 160px;
padding: 40px;
}
h2,
p {
margin-bottom: 1em;
}
.fails h2 {
break-before: column;
}
If the desired outcome cannot be achieved using columns, alternative solutions will also be considered. Ideally, without the need for JavaScript or additional HTML elements.