html - 2 つの要素が CSS3 列を分割できないようにする

Question

CSS3 列を使用して 2 つの要素を「まとめて」保持するのに問題があります。次の HTML を検討してください。

<div style="column-count: 2"> <!-- I'm aware there's more CSS rules needed -->
    <div class="heading">Heading 1</div>
    <div class="content">Long paragraph text goes in here lalalalala</div>
    <div class="heading">Heading 2</div>
    <div class="content">Some longer paragraph text goes in here</div>
</div>

Chrome、Firefox、および Safari では、これは私が望むように表示されます。

Heading 1                 | Heading 2
Long paragraph text goes  | Some longer paragraph text goes
in here lalalalala        | in here

次の CSS を使用して、見出しとコンテンツを「くっつけ」ました<div>。

.heading {padding-bottom: 30px;}
.content {margin-top: -30px;}

これにより、見出しが 1 つの列の最後の項目ではなく、コンテンツが次の列にあることが保証されます。ただし、これはまさにIE10で起こることです:

Heading 1                 | Some longer paragraph text goes
Long paragraph text goes  | in here
in here lalalalala        | 
Heading 2                 |

各列には多数の#headingand div が存在する可能性があるため、見出し#contentに単に a を使用するだけでは十分ではないことに注意してください。break-after: always

また、divは列間を流れる必要があるbreak-inside: avoid;ため、両方の要素を別の div でラップしてその div に追加するだけでは不十分です。#content

私が求めているのは、見出しとコンテンツ div が列区切りで分割されないようにするための CSS です。

ありがとう