JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="padded excludes">
        <div class="parts first"> <span class="prefix">Quisques:&nbsp;</span><span class="segment level-0"><span class="part text">longtextthatwraps incorrectly (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span></span>
        </div>
        <div class="parts"> <span class="segment level-0"><span class="part text">consectetur adipiscing  (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span></span>
        </div>
        <div class="parts"> <span class="segment level-0"><span class="part text">quisque non mauris sed:</span></span>
        </div>
        <div class="parts"> <span class="segment level-1"><span class="part list-item">hendrerit (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span></span>
        </div>
        <div class="parts"> <span class="segment level-1"><span class="part list-item">non mauris sed (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span></span>
        </div>
        <div class="parts"> <span class="segment level-1"><span class="part list-item">lorem ipsum dolor (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span></span>
        </div>
    </div>
</div>

CSS

.wrapper {
    width: 250px;
    background: #c3dff5;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.padded {
    padding-left: 20px;
}
.parts {
    padding-left: 80px;
}
.parts.first {
    padding-left: 0;
}
.prefix {
    color: #D12;
    font-weight: bold;
    min-width: 80px;
    display: inline-block;
}
.level-0,.level-1 {
    display: inline-block;
    padding-left: 5px;
    text-indent: -5px;
    outline: 1px dotted #f0f;
}
.level-1 {
    padding-left: 20px;
}