If I have n different elements to be placed in the same horizontal space, each taking up 100% of the screen width, for example:
<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 all have equal width and adjust automatically when the screen width changes.
If one or more of the elements can be removed (display: none) or simply doesn't exist, it's important that the widths remain the same, like this:
<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>
As you can see, the span is still centered. This can be achieved with table-layout:fixed.
I'm curious if there's an alternative solution that doesn't involve using the table tag. Perhaps a solution using the div tag with display:grid or display:flex?
P.S. No fixed widths or calculations, just pure CSS