JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<div class="panel">
    <div class="menu pull-left">
        <div class="icon">
        </div>
    </div>
    <div class="menu pull-right">
        <div class="icon">
        </div>
        <div class="icon">
        </div>
        <div class="icon">
        </div>
    </div>
    <div class="text">
        Long long long long long long long long long text
    </div>
</div>

CSS

.panel {
    width: 250px;
    height: 20px;
    padding: 4px 0;
    background: #aaf;
}
.panel::after {
    clear: both;
}

.menu {
    padding: 0 4px;
}
.menu::after {
    clear: both;
}

.text {
    white-space: nowrap;
    overflow: hidden;
}

.icon {
    width: 20px;
    height: 20px;
    background: #faa;
    margin-left: 4px;
    float: left;
}
.icon:first-child {
    margin-left: 0;
}

.pull-left {
    float: left;
}
.pull-right {
    float: right;
}