<h2>The idea here is:</h2>
<ul>
  <li>Only the left-most text should truncate when there is not enough room to display it</li>
  <li>Before any text truncates, each text node should but-up next to each other and occupy any remaining space</li>
  <li>Each text node can NOT have a set width (fixed or flexible) because the length of the text can vary</li>
</ul>
<div class="container">
  <div class="text left">This <strong>should truncate</strong> and align left</div>
  <div class="text middle">This should align left</div>
  <div class="text right">This should align right</div>
</div>
<p>This is easily do-able with flexbox, but what about a fallback for none flexbox browsers?<br>For none flexbox browsers, we CAN apply a width to any of the text elements (and just accept that it may truncate too early). But to do this, we need a different DOM structure. So using the DOM structure below, acheive the same layout as above (using Flexbox).</p>

<h2>None Flexbox Browsers <i style="font-weight: normal;">but still using flexbox</i></h2>
<div class="container2">
  <div class="left-wrap">
    <div class="text left">This <strong>should truncate</strong> and align left</div>
    <div class="text middle">This should align left</div>
  </div>
  <div class="text right">This should align right</div>
</div>

// stupid resets
* {
  box-sizing: border-box;
}


body {
  font-family: Sans-serif;
  padding: 50px;
  font-size: 16px;
  line-height: 22px;
  color: #333;
}
h2 {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 22px;
}
p {
  margin-bottom: 22px;
}
ul {
  margin-bottom: 22px;
  list-style: disc outside;
  padding-left: 22px;
}
strong {
  font-weight: bold;
}
i {
  font-style: italic;
}

// Okay, let's go...
.container {
  background: #222;
  padding: 0 5px;
  height: 30px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  
  .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
  }
  .left {
    flex: 0 1 auto;
    color: tomato;
  }
  .middle {
    flex: 1 0 auto;
    color: limegreen;
  }
  .right {
    flex: 0 0 auto;
    color: skyblue;
  }
}

.container2 {
  background: #222;
  padding: 0 5px;
  height: 30px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  
  .left-wrap {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
  }
  .right {
    flex: 0 0 auto;
    color: skyblue;
    padding-left: 10px;
  }
  
  .left {
    color: tomato;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .middle {
    color: limegreen;
    display: inline-block;
    vertical-align: top;
  }
}