JSFiddle - React, Tailwind, and code Playground

by rolfsf

HTML

<div class="toolbar">
    <h3>Akjasdlfkjaslkasl;kj alsdkjfasldkfjal;skdjfla;ksdjflaskdjfla;ksdjflaksjdfl;kajsdfl;</h3>
    <div class="switch-bar">
        <ul class="filter-switch">
            <li class="active">asdf</li>
            <li>sadf</li>
            <li>asdf</li>
        </ul>
    </div>
</div>
<div class="toolbar">
    <div class="switch-bar">
        <ul class="filter-switch">
            <li class="active">asdf</li>
            <li>sadf</li>
            <li>asdf</li>
        </ul>
    </div>
</div>

CSS

.toolbar {display: table; position: relative;width: 100%;min-height: 3em;}
.toolbar + .toolbar {border-top: 1px solid #999;}
.toolbar > h3 {float: left; max-width: 80%; word-wrap: break-word;}
.toolbar > .switch-bar {display: inline-block; float: right;}
.switch-bar > .filter-switch {list-style-type: none; display: block;}
.filter-switch > li {display: inline-block; width: 8em; background-color: orange;}