JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="flex1 flex">
    <li>180px</li>
    <li>160px</li>
    <li>60px</li>
</ul>

<ul class="flex2 flex">
    <li>144px</li>
    <li>148px</li>
    <li>48px</li>
</ul>

<ul class="flex3 flex">
    <li>175.5px</li>
    <li>160px</li>
    <li>64.4px</li>
</ul>

CSS

.flex {
  display: flex;
  width: 400px;
  height: 50px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  border-bottom: 1px solid #ccc;
}

.flex li:nth-child(1) {
  flex: 0 2 300px;
  background: orange;
}

.flex li:nth-child(2) {
  flex: 0 1 200px;
  background: chartreuse;
}

.flex li:nth-child(3) {
  flex: 0 2 100px;
  background: aqua;
}

.flex2 li {
  padding: 0 10px;
}

.flex3 li {
  padding: 0 10px;
  box-sizing: border-box;
}