JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div contenteditable class="input">test</div>
    <div class="button" tabindex="0"
        ><span class="category">Cat</span
        ><span class="values"
            ><span class="value">val1</span
            ><span class="value">val2</span
            ><span class="value">val3</span>
        </span
    ></div>
    <div contenteditable class="input"></div>
    <div class="button" tabindex="0"
        ><span class="category c2">Cat</span
        ><span class="values"
            ><span class="value">val1</span
            ><span class="value">val2</span
            ><span class="value">val3</span>
        </span
    ></div>
    <div contenteditable class="input"></div>
</div>

CSS

div.container {
    border: 1px solid red;
    padding: 2px;
    border-radius: 1em;
    line-height:1em;
}

div.container * {
    vertical-align:middle;   
}

div.input {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    padding: 1px 1ex;
    baseline:bottom;
}

div.button {
    display: inline-block;
    border: 1px solid blue;
    background: none;
    border-radius: 3px;
    padding: 0;
    height: 26px;
}
div.button:focus {
     border-color: yellow;
}

div.button span.category,
div.button span.value {
    display: inline-block;
    height: 24px;
    line-height: 26px;
    padding: 1px 0.5em;
}

div.button span.category {
    background-color: #cbfcfe;
}
div.button span.c2 {
    font-size: 130%;
}

div.button span.value {
    border-left: 1px solid blue;
    background-color: #cbcbfe;
}