JSFiddle - React, Tailwind, and code Playground

by Filipp Dernovoy

HTML

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

CSS

.column {
    width: 150px;
    border: 1px solid #666;
    overflow: hidden;
}
.flex-filename {
    display: flex;
}
.flex-filename:hover {
    display: flex;
    background: #ddd;
}
.flex-filename .finish {
    flex-shrink: 0;
}
.flex-filename .start {
    flex-shrink: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}