CSS Grid (or flexbox?) with 1 row and 3 columns, but 2-3 elements that the 1st element will span 1-2 columns

Question

I am trying my darndest to accomplish this relatively simple layout for 2-3 elements. Everything I've tried from px/fr/% with minmax() & grid can't seem to get it quite right.

I want my input to take up all remaining space leftover whether or not the button is present. The select should remain the same size regardless if button is present.

The percentages make most sense, but isn't exactly working like I'd like. no button: 75% input + 25% select with button: 50% input + 25% select + 25% button

What am I missing on getting this to work? Am I just thinking about this wrong? SHOW ME THE WAY!

I've even tried adding independent css to each element with the grid-column: 1 / 3:

.input-grid .input-grid-input { grid-column: 1 / 3 }
.input-grid .input-grid-select { grid-column: 4 }
.input-grid .input-grid-button { grid-column: 5 }

With out button:

With button:

.input-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-template-columns: minmax(50%, 75%) 25% minmax(0, 25%);
}

<div class="input-grid">
  <input type="text" class="input-grid-input" value="input" data-form-type="other">

  <select class="input-grid-select" data-form-type="other">
    <option value="Select Value 1">Select Value 1</option>
    <option value="Select Value 2" disabled="disabled">Select Value 2</option>
  </select>

  <button class="btn input-grid-btn btn--primary" hidden="hidden">
    Check Availability
  </button>
</div>

Answer 1

I would suggest that specifying the third value of grid-template-columns (for the button) as max-content.