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-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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