Say I have n widgets to be fitted into the same horizontal space taking up 100% of screen width, e.g.

```
<table style="width:100%;text-align:center;table-layout:fixed">
  <tr>
    <td><input/></td>
    <td><span>TEXT</span></td>
    <td><select><option>Something</option></select></td>
  </tr>
</table>

```

They share equal width and is adjusted automatically when screen width changes.

Now if one or some of the widgets can be removed (display: none) or simply not there, it is required that the widths do not change, e.g.

```
<table style="width:100%;text-align:center;table-layout:fixed">
  <tr>
    <td><input style="display:none"/></td>
    <td><span>TEXT</span></td>
    <td></td>
  </tr>
</table>

```

Notice how the `span` is still in the middle. It is doable with `table-layout:fixed`.

I wonder if there is an alternative solution, which does not use the `table` tag? Most likely a `div` tag solution with `display:grid` or `display:flex` perhaps?

P.S. no hardcoded number for widths and no computation, just pure CSS