JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<span class="step-a">STEP 3.</span><span class="step-b">This line is ok.</span>

<span class="step-a">STEP 4.</span><span class="step-b">I don't like the way this wraps</span>

<span class="step-a">STEP 5.</span><span class="step-b">This line is ok.</span>

CSS

.step-a {
    float: left;
    clear: left;
    color:#3498DB;
    font-size: 14px;
    text-transform:capitalize;
    vertical-align:baseline;
}

.step-b {
color: #8e8e93;
font-size: 16px;
vertical-align: baseline;
padding-left: 10px;
display: block;
word-break: break-all;
overflow: hidden;
}