Javascript 根据到相邻（浮动右）div的距离（浮动左）div的响应宽度

我试图在（浮动左）div上使用文本省略号，它“夹在”（浮动左）div和（浮动右）div之间”

[左浮动][左浮动（省略号需要宽度）][右浮动]

我的问题是，要使用文本省略号，我需要指定“三明治”div的宽度或最大宽度。但我不知道如何做到这一点，因为该宽度取决于到相邻（右浮动）div的距离，这取决于浏览器窗口的宽度

请检查下面的代码笔。如果缩小浏览器窗口的宽度，您将看到信息图标在与我需要省略的文本发生冲突时跳到下一行

简单地说，我希望L/R箭头和信息图标分别保持最左边和右边，不管窗口宽度如何，中间的文本根据窗口宽度来决定。 我搜索了一下，我发现我可以用calc来做这件事，但我正在寻找一个不是那么实验性的解决方案

多谢各位

下面是HTML代码

<div id="footer">
  <div id="subie">

    <div id="control">
        <button id="prv" class="button">←</button>
        <button id="pos" class="button">→</button>
      </div>

      <div id="title">
        <span id="page">Gloria Anzaldúa- Borderlands, La Frontera, The New Mestiza</span>
      </div>

      <div id="info">
        <button id="" class="button"><img src="http://findicons.com/files/icons/2232/wireframe_mono/32/info.png" width="33px"></button>
      </div>

    </div>
</div>

#footer {
  position: fixed;
  margin: 0px;
  padding: 0px;
  bottom: 0px;
  height: 5.5vh;
  width: 100vw;
  background-color: #ffffff;
  z-index: 100;
}

#subie {
  position: absolute;
  left: 51vw;
  width: 42vw;
  height: 5.5vh;
  margin: 0px;
  padding: 0vh 1vw 0vh 1vw;
}

#control {
  float: left;
  text-align: left;
  display: flex;
  align-items: center;
  height: 5.5vh;
}

#title {
  float: left;
  text-align: left;
  display: flex;
  align-items: center;
  height: 5.5vh;
  width: ;
}

#info {
  float: right;
  display: flex;
  align-items: center;
  height: 5.5vh;
}

.button {
  background-color: transparent;
  border: none;
  margin: none;
  padding: none;
  color: black;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  outline: 0;
  font-size: 1em;
}