Dynamic width of 'inline-block' while resizing window

Question

I put several tables (display: inline-block & fixed column width: 140px) side by side seperated by a 100px margin.
► CodePen / Original code

I want these margins to reduce when I resize the width of the window so that the line doesn't collapse too soon. I did find a way to do that, but it's hacky and I don't really like this solution.
► CodePen / Hacky solution

Exemple:

<div class="tab_centre" style="font-size: 0px;">
<table style="font-size: 12px;"><thead><tr><th class="etat0">Env 3a</th><th class="etat0">Env 3b</th></tr></thead><tbody><tr><td>v1.2</td><td>v1.2</td></tr></tbody></table>
<div style="display: inline-block; max-width: 100px; width: calc(100vw - 840px - 135px);"></div>
<table style="font-size: 12px;"><thead><tr><th class="etat0">Env 4a</th><th class="etat0">Env 4b</th></tr></thead><tbody><tr><td>v1.2</td><td>v1.2</td></tr></tbody></table>
<div style="display: inline-block; max-width: 100px; width: calc(100vw - 840px - 135px);"></div>
<table style="font-size: 12px;"><thead><tr><th class="etat0">Env 5a</th><th class="etat0">Env 5b</th></tr></thead><tbody><tr><td>v1.1+</td><td>v1.1+</td></tr></tbody></table>
</div>

Is there a way to avoid max-width: 100px; width: calc(100vw - 840px - 135px);? The values inserted in the 'calc' are an hit-and-miss.

Answer 1

You should give margin in percentage instead of px.

margin-right: 2%;