JSFiddle - React, Tailwind, and code Playground

HTML

<dl>
<dt>
Name
</dt>
<dd>
John Doe
</dd>
 <dt>
X
</dt>
<dd>
Y
</dd>
</dl>

CSS

dl dt, dl.inline dd {
    float: left;
}
dl dd + dt, dl.inline dd + dd {
    clear: left
}
dl.inline dd + dd {
    float: none
}
dl.inline dt {
    font-weight: bold
}