Prevent flex child to shrink

Question

I have a from row with two inputs. There is a logic to display ⚠️ (warning emoji) next to the last input on the row, depending on the input number.

However, due to how flex box works, the input shrinks... What do I need to do to keep the size of input same and display the warning emoji next to it?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row py-3 border-bottom order-line-item mx-0">
  <div class="col-6 pl-3 pr-4">
    <div class="d-flex align-items-center flex-fill product-detail-field cursor-pointer">
      <div class="d-flex align-items-center flex-fill">
        <div class="ml-3 d-flex flex-column align-items-start flex-fill">
          <div class="d-flex align-items-center w-100">Snowboard</div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-2 d-flex align-items-center">
    <div>
      <input type="number" name="unitPriceAmount" class="form-control undefined" min="0" value="0">
    </div>
  </div>

  <div class="col-2 d-flex align-items-center">
    <div class="d-flex align-items-center flex-row">
      <input type="number" name="quantity" class="form-control undefined" min="0" value="0">
      <span class="ml-1" title="Some Warning">⚠️</span>
    </div>
  </div>

  <div class="col d-flex align-items-center justify-content-end">
    <div>€0</div>
  </div>

  <div class="col-form-label ml-2 d-flex align-items-center"><span class="cursor-pointer ml-auto mr-1"><i class="fas fa-times"></i></span></div>
</div>

Answer 1

You can give the warning sign a position of absolute so it is removed from the flow and won't effect any other elements:

.d-flex.align-items-center.flex-row {
  position: relative;
}

.ml-1 {
  position: absolute;
  left: 100%;
}

It will be better if you could give the elements some specific class names.