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><!--no whitespaces between list items!!--><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;
}

.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 */
    
}

.tag > div {
    height: 100%;
    display:inline-block; /*so that label&tail are lined up */    
}

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

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