JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<dl>
        <dt>Definition title 1</dt>
        <dd>def detail 1.1</dd>
    </dl>
    <dl>
        <dt>Definition title 2</dt>
        <dd>def detail 2.1</dd>
        <dd>def detail 2.2</dd>
    </dl>

CSS

dl {display:table-cell; margin:1em; background-color: #eee; vertical-align: top; padding:1em; border-spacing: 10px;} 
    dt {margin: 1em; padding:1em; font-weight: bold; border-spacing: 10px; background-color:red;}
    dd {margin: 1em; padding:1em; border-spacing: 10px; background-color:green;}


dl{
    margin-left:10px;  /* vertical gap cellspacing */
}
dl:last{
    margin-right:10px;
}
dt,dd{
    margin-top:10px; /* horizontal gap cellspacing */
}
dd:last{
     margin-bottom:10px;   
}

JavaScript

/* Cell-spacing, border-spacing on non-td elements */