JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="always-left">
    always-left
  </div>
  <div id="right-group">
    <div id="shrinkable">
      always-right / left
    </div>
    <div id="not-shrinkable">
      always-right / right
    </div>
  </div>
</div>

CSS

* {
  padding: 5px;
}

#container {
  background-color: lightgreen;
  display: flex;
  flex-wrap: wrap;
}

#always-left {
  background-color: yellow;
  margin: auto;
  margin-left: 0;
}

#right-group {
  margin: auto;
  margin-right: 0;
  display: flex;
}

#shrinkable {
  background-color: violet;
  vertical-align: middle;
  order: 1;
  flex: 0 1 auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#not-shrinkable {
  background-color: lightblue;
  vertical-align: middle;
  order: 2;
  flex: 1 0 auto;
}