Avoid page break between dt and dd elements

Question

I've got many <dd> and <dt> elements on a page in this exact order. For example:

<dt>
  "Some random text here"
</dt>
<dd>
  <input type="text">
  <span></span>
</dd>

This pattern repeats very often on a page. In the case a user would like to print the page, I would like to prevent page breaks between <dd> and <dt> element. They should always be together.

Is there any way how to do that? Applying css property: page-break-after:avoid on a <dt> element or page-break-before:avoid on a <dd> element does not seem to work.

Thanks for help

Answer 1

I am not an expert in this but I found a workaround:

Create an ID and add the page-break-before there:

#break {
    page-break-before:left;
}

Now simply add the ID where you want the page break to be:

<dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>
<dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>
<dt id="break">Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>
<dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>
<dt id="break">Test</dt>
    <dd>Lorem ipsum dolor sit amet.</dd>
    <dd>Lorem ipsum dolor sit amet</dd>

This is the best solution I found so far, I don't know if it is possible to do it automatically.

Hope this helps.

Regards