JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="inline">
    <dt>Term 1</dt>
    <dd>Def 1</dd>
    <dd>Def 2</dd>
</dl>
<dl class="inline">
    <dt>Term 2</dt>
    <dd>Def 1</dd>
    <dd>Def 2</dd>  
</dl>
<dl class="inline">
    <dt>Term 3</dt>
    <dd>Def 1</dd>
    <dd>Def 2</dd>
</dl>

CSS

/* dl lists contain dd terms all colored light aqua */
dl > dd {
    background-color: #c0ffee;
}
/* inline dl lists have dd terms displayed inline  */
dl.inline > dd {
    display: inline;
}
/* however, in an inline dl list, the first dd succeeding a dt is left 
   to be colored normally and all after it are colored yellow-green */
dl.inline > dt + dd ~ dd {
    background-color: #bada33;
}