JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="col1">Column1 has to be flexible</div>
  <div class="col3">Column3</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>

CSS

.wrapper {
  height: 30px;
  overflow: hidden;
}
.col1 { 
    background-color: #ddf; 
    float: left;
    height: 30px;
}
.col2 { 
    position: relative;
    background-color: green; 
    float: none;
    height: 30px;
    overflow: hidden;
    display: table-cell;
}
.col2 div {
  opacity: 0;
}
.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; 
    float: right;
    height: 30px;
}