JSFiddle - React, Tailwind, and code Playground

HTML

<div class='row'>
  <div class='left'>
      text text text text
  </div>
  <div class='right'>
  
  </div>
</div>

CSS

.row {
  height: 20px;
  background-color: teal;
}
.left {
  height: 100%;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 50px);
  color: white;
  height:500px;
}
.right {
  height: 100%;
  width: 45px;
  display: inline-block;
  vertical-align: middle;
  background-color: tomato;
}