Is there a way to prevent a line break between two elements (dt and dd) without a wrapper?
<p>It's for a definition list, which only allows <code>dt</code> and <code>dd</code> tags. It is not valid to wrap a <code>dt</code> and its associated <code>dd</code> inside of a <code>div</code>.
Example definition list:</p>

<pre><code>&lt;dl&gt;
    &lt;dt&gt;Name:&lt;/dt&gt;
    &lt;dd&gt;Nick&lt;/dd&gt;
    &lt;dt&gt;Age:&lt;/dt&gt;
    &lt;dd&gt;26&lt;/dd&gt;
    &lt;!-- etc --&gt;
&lt;/dl&gt;
</code></pre>

<p>I want the <code>dt</code> and <code>dd</code> tags to be inline-blocks that wrap. I want to allow up to two <code>dt/dd</code> pairs on one line, but I never want it to wrap after a <code>dt</code> tag. In other words, I never want "Name" and "Nick" to be on different lines. I never want "Age" and "26" to be on different lines either. Perhaps all four of them are on one line, or perhaps "Name" and "Nick" are on one line and "Age" and "26" are on the next line, depending on the viewport width.</p>

<p>I tried putting <code>&amp;nbsp;</code> between the elements but that didn't work. I can't wrap the dt with its associated dd because technically that is invalid markup. </p>

<p>Is there any correct solution to this problem? Or do I have to abandon semantic principles in order to get the styling I want?</p>

<p>Edit: This is not a duplicate of <a href="https://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line">How to style dt and dd so they are on the same line?</a> because I said "I want to allow up to two dt/dd pairs on one line". Whether there is one or two pairs depends on variable content.</p>