JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<div>
    <dl>
        <dt>Definition title 1</dt>
        <dd>def detail 1.1 <br> ipsum lorieum</dd>
    </dl>
    <dl>
        <dt>Definition title 2</dt>
        <dd>def detail 2.1</dd>
        <dd>def detail 2.2 <br> ipsum lorieum</dd>
    </dl>
</div>

CSS

body {
    background-color: beige;
}

div { 
    display:table; 
    border-spacing:15px;
    border: 1px solid #ccc;
    background-color: #fff;
    
}

dl {
    display:table-cell; 
    border: 1px solid #000;
    margin:1em; 
    background-color: #eee; 
    vertical-align: top; 
    padding:1em; 
}

dt {
    margin: 2px 0; 
    padding:1em; 
    font-weight: bold; 
    border: 1px solid #ccc; 
}

dd {margin: 2px 0; 
    padding:1em; 
    border: 1px solid #ccc; 
    // display:table-cell; 
}

JavaScript

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