How to keep the heading with first paragraph in a html multi column together

Question

I am receiving content from the backend, which need to render in a multi column layout, and the headline and the first paragraph should always stay together and must not slide in two different columns.

I read some articles here, but they did not match my case and did not solve my issue. The DOM hierarchy is like in the example below.

.container {
  column-width: 200px;
}

h2 {
    break-before: auto;
    break-after: avoid-column;
}
h2 + p {
    break-before:avoid;
    color:red;
}

<div class="container">
    <h2>My heading1</h2>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon.</p>
    <h2>My heading2</h2>
    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.</p>     
</div>