JSFiddle - React, Tailwind, and code Playground

by Jason Aller

HTML

<dl>
    <dt>Term</dt>
    <dd>Definition 1</dd>
    <dd>Definition 2</dd>
</dl>
<dl>
    <dt>Term</dt>
    <dd>Definition 1</dd>
    <dd>Definition 2</dd>
    <dt>Term that is very long and needs to have wrapping</dt>
    <dd>Definition 1</dd>
    <dt>test</dt>
    <dd>Definition 1</dd>
    <dd>Definition 2</dd>
    <dd>Definition 3</dd>
</dl>
<dl>
    <dt>term 1</dt>
    <dt>term 2</dt>
    <dd>definition for both term 1 and term 2</dd>
</dl>

CSS

dl
{
    margin: 2em 0;
    padding: 0;
    font-family: georgia, times, serif;
}

dt + dd {
    border-top: 1px solid red;
}

dd + dd {
   border-top: 1px solid pink;
}

dt
{
    position: relative;
    left: 0;
    top: 1.1em;
    width: 8em;
    font-weight: bold;
}

dd
{
    border-left: 1px solid #000;
    margin: 0 0 0 9em;
    padding: 0 0 .5em .5em;
}