JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <span class="item item-a">
    <span>1</span>
  </span>
  <span class="item item-b">
    <span>2</span>
  </span>
  <span class="item item-c">
    <span>3</span>
    <span>4</span>
  </span>
</div>

CSS

.container {
  display: table;
  border-collapse: collapse;
  width: 100%;
}
.item {
  display: table-cell;
  vertical-align: top;
  padding: 4px;
  border: 1px solid grey;
}
.item-a {
  width: 50%;
  text-align: right;
}
.item-b {
  text-align: center;
  white-space: nowrap; /* remove as needed */
}
.item-c {
  width: 50%;
}
.item span {
  display: inline-block;
  border: 1px solid red;
}
.item-b span {
  padding: 0 50px; /* for demo only */
}