CSS колонки перед элементом, не нарушая обертку

Question

Моего желаемого результата, всегда перерыва до определенного элемента, h2 в этом случае:

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> 

Below fails because column is broke and columns now overflow 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; 
} 

Если это не так, со столбцами, я буду принимать другие решения, но в этом случае я не буду использовать javascript.

Я также надеюсь, что есть способ без необходимости добавления дополнительных элементов html.

Answer 1

Вы можете решить это, обернув заголовок и абзац в любом контейнере, который вы хотите. А затем применяя следующие к элементу контейнера:

break-inside: avoid; 

https://jsfiddle.net/hv0sm40o/4/

Для дальнейшей разработки, применения правил разрыва отдельных элементов означает, что только они будут нарушать соответственно, однако если вы хотите 2 элемента склеить вас необходимо использовать родительский элемент.