JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="topics">
    <dt>Topic</dt>
    <dd>test 1</dd>
    
    <dt>Sub Topic</dt>
    <dd>Test 2</dd>
</dl>

CSS

.topics {
    overflow: hidden; /* clear floated child elements */
    background: #ccc;
    width: 200px
}
.topics dt, .topics dd {
    margin: 0;
    padding: 0;
    float: left;
    width: 50%
}
.topics dt {
    font-weight: bold
}