JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="always-left">
    always-left
  </div>
  <div id="right-group">
    <div id="shrinkable">
      min-width 100px with ellipsis
    </div>
    <div id="not-shrinkable">
      some long text that should not have ellipsis
    </div>
  </div>
</div>

CSS

#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;
}

#not-shrinkable {
  background-color: lightblue;
  vertical-align: middle;
}