JSFiddle - React, Tailwind, and code Playground

by Filipp Dernovoy

HTML

<div class="column">
    <div class="filename">
        <div class="finish">001.jpg</div>
        <div class="start">long_filename_foo_barlong_filename_foo_barlong_filename_foo_bar</div>
    </div>    
    <div class="filename">
        <div class="finish">001.jpg</div>
        <div class="start">long_filename_foo_bar</div>
    </div>
    <div class="filename">
        <div class="finish">001.jpg</div>
        <div class="start">short</div>
    </div>
</div>

CSS

.column {
    width: 300px;
    border: 1px solid #d00;
    overflow: hidden;
}
.filename {
    height: 22px;
    border: 1px solid #ccc;
    display: inline-block;
    max-width: 100%;
    float: left;
    clear: left;
}
.start {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background:yellow;
}
.finish {
    float:right;
    background: pink;
}