JSFiddle - React, Tailwind, and code Playground

by mstalfoort

HTML

<dl>
    <dt>Bug</dt>
    <dd class="bug">&nbsp;</dd>
    <dt>Improvement</dt>
    <dd class="improvement">&nbsp;</dd>
    <dt>Story</dt>
    <dd class="story">&nbsp;</dd>
    <dt>Impediment</dt>
    <dd class="impediment">&nbsp;</dd>
</dl>

CSS

body {
    font-family: Ubuntu, Arial;
}

dt, dd {
    width: 50%;
    display: inline-block;
}

dt {
    /*clear: left;
    float: left;*/
    margin-top: 10px;
    width: 25%;
}

dd {
    margin-left: 0;
}

.bug {
    background-color: #d81515;
}
.improvement {
    background-color: #2eab1b;
}
.story {
    background-color: #b5109f;
}
.impediment {
    background-color: #9ffc0a;
}