JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cont">
  <div class="left-h">
  place holder
  </div>
  <div class="middle-h">
    my very long long title goes here
  </div>
</div>
<div class="real-center">
      my very long long title goes here
</div>

CSS

.cont{
  width: 100%;
  border: 1px solid black;
  display: flex;
  text-align: center;
}
.left-h{
  flex-basis: 150px; /* width/height  - initial value: auto */
  background-color: #e5e5e5;
}
.middle-h{
  background-color: yellow;
  flex: 1 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
}
.middle-h::after{
  content: '';
  display: inline-block;
  width: calc(100% - 150px);
  max-width: 148px;           /*  150px - 2px border  */
}

.real-center{
  width: 100%;
  text-align:center;
}