I have 2 rows consisting of 12 cols
and a test button which should expand the first col of first row after each click.

HTML and CSS:

<div class="row">
  <div class="col">
  <!-- 12 times -->
</div>
<div class="row">
  <div class="col">
  <!-- 12 times -->
</div>

.row {
  display: flex;
  margin: 20px;
}

.col {
  display: flex;
  flex: 1 1 calc((100% / 12);
  position: relative;
  border: 1px dashed darkgray;
  border-right: 0;
  padding: 10px;
}

This is how I am expanding the column (when clicking the button):

const minColWidthPercentage = (1 / 12) * 100;

expandCol(col) {
  const colStyle = window.getComputedStyle(col);
  const flexBasis = parseFloat(colStyle.flexBasis) + minColWidthPercentage;
  col.style.setProperty("flex", `1 1 calc(${flexBasis}%)`);
}

As soon as I comment out the ‘padding: 10px;’ from col’s css, everything works fine.
The right border of the expanded column correctly aligns with the border of the column below from the second row.
But if I keep the padding, the alignment breaks.

Without padding after expanding 4 times:

With padding after expanding 4 times:

I already tried 1 1 calc(${flexBasis}%+${padding*n}px) approach.
But this does not solve the problem.
I think I should include the padding somehow in the percentage calculation, but how exactly?

PS: Note that, while expanding I am removing the neighbour column in another function.