(Bootstrap) Why are columns taking up more width than needed because of other existing column?

Question

Here's my bootstrap:

<div class="row my-4 mx-2">
  <div class="col-auto">
    <div class="row h-100">
      <div class="col-12 col-md-6 d-flex justify-content-center align-self-center m-0">blahblah edit button</div>
      <div class="col-12 col-md-6 d-flex justify-content-center align-self-center m-0">blahblah post button</div>
    </div>
  </div>
  <div class="col three-payroll-inputs">blahblah</div>
  <div class="col-1 red-trash-can">blahblah</div>
</div>

Contents don't matter, but here is what displays:

I want this to display instead:

What's strange is when I delete a column div, it suddenly fixes itself and shrinks the width to the amount I expect!

So why is it that having two of these column divs will grow the space to about twice what I want? My best guess is that they're processing each other as being on the same line, causing it to be stretched like this.

Thanks!