JSFiddle - React, Tailwind, and code Playground

by ducas

HTML

<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2 Definition 2</dd>
    <dt>Term 3 Term 3 Term 3 Term 3 Term 3</dt>
    <dd>Definition 3</dd>
    <dt>Term 4</dt>
    <dd>Definition 4</dd>
</dl>

CSS

dt, dd {
    box-sizing: border-box;
    margin: 2px 0;
    padding: 2px;
    float: left;
}
dl {
    width: 100%
}
dt {
    clear:left;
    width: 15%;
    background-color: blue;
}
dd {
    width: 85%;
}