JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex">
    <div class="col1">Column 1</div>
    <div class="col2">
        <span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque eos sed dolorum fugit! Nihil ratione laudantium a cumque vero natus excepturi praesentium error possimus eveniet tempore repudiandae inventore rerum porro?
        </span>
    </div>
    <div class="col3">Column 2</div>
</div>

CSS

.flex {
    display: flex;
}

.col1 {
    width: 25%;
    flex: 0 0 25%;
}

.col2 {
    flex: 1 1 auto;
}

span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;
}

.col3 {
    flex: 0 0 25%;
}