JSFiddle - React, Tailwind, and code Playground
HTML
<div class="root">
<div class="col1">Column1 has to be flexible</div>
<div class="col2"> <div> </div> <span>This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences. This is an example of a div that contains a series of very long run on sentences.</span></div>
<div class="col3">Column3</div>
</div>
CSS
.root {
display:flex;
}
.col1 {
background-color: #ddf;
height: 65px;
}
.col2 {
position: relative;
background-color: green;
flex:1;
height: 65px;
overflow: hidden;
}
.col2 span {
position: absolute;
top: 0;
left: 0;
max-width: 99%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
/* col3 has a known width */
.col3 {
background-color: cyan;
height: 65px;
}