JSFiddle - React, Tailwind, and code Playground

by mrbinky3000

HTML

<html>
    <body>
        <ul class="tag-list">
            <li class="tag">
                <div class="tag-label">short tag</div>
                <div class="tag-tail tag-count">1154353</div>
            </li>
            <li class="tag">
                <div class="tag-label">A quite long long long long long tag</div>
                <div class="tag-tail tag-active">5</div>
            </li>
        </ul>
    </body>
</html>

CSS

.tag-list {
    border: 1px solid red;
    display: block;
}

.tag {
    border:1px solid green;
    display:inline-block;/*so that tags are lined up like words... */
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    white-space:nowrap; /* so that label & tail sub-divs are stuck all together */
    height: 2em;
    line-height: 2em; /* text is vertically centered */
    overflow: hidden;
    
}

.tag > div {
    height: 100%;
    display:block;
    float: left;        
}

.tag-tail {
    border:1px solid orange;
}

.tag-label {
    border:1px solid blue;
}