JSFiddle - React, Tailwind, and code Playground

by ryanwheale

HTML

<div class="scroller">
    <div class="row">
        <span class="name">Some long name here blah blah blah blah blah</span>
        <div class="buttons">
            <button>Variable width</button>
            <button>wide buttons</button>
            <button>&quot;floated&quot;</button>
            <button>right</button>
        </div>
    </div>
    <div class="row">
        <span class="name">Some long name here blah blah blah blah blah</span>
        <div class="buttons">
            <button>Variable width</button>
            <button>wide buttons</button>
            <button>&quot;floated&quot;</button>
            <button>right</button>
        </div>
    </div>
    <div class="row">
        <span class="name">Some long name here blah blah blah blah blah</span>
        <div class="buttons">
            <button>Variable width</button>
            <button>wide buttons</button>
            <button>&quot;floated&quot;</button>
            <button>right</button>
        </div>
    </div>
</div>

CSS

.scroller {
    height: 12em;
    overflow: auto;
    background-color: #eee;
}

.row {
    /* flexbox setup */
    display: -webkit-flex;
    -webkit-flex-direction: row;
    
    display: flex;
    flex-direction: row;
    
    justify-content: flex-end;
}

.name {
    flex: 1 4 10em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid red;
}

.buttons {
    flex: 2 1 20em;
    text-align: right;
    white-space: nowrap;
    background-color: #eff;
    border: 1px solid blue;
}