Bootstrap min фиксированная ширина внутри flex

Question

Я пытаюсь сделать панель поиска с начальной загрузкой чего-то похожего на поле поиска holidaypiratescom.

Мне нужно иметь минимальную ширину на первой и последней кнопке, при этом позволяя 3 полям формы сгибаться.Если я устанавливаю ширину непосредственно с помощью css (min-width), элемент кнопки остается вне карты, когда я уменьшаю экран.Не знаете, как это сделать, какие-либо предложения?

<div class="card">
<div class="search-box d-md-inline-flex">

<!-- col1 -->
<div class="card border-0">
  <input class="btn btn-primary" type="text" name="" value="All categories">
</div>
<!-- col2 -->
<div class="card border-0">
    <input class="form-control mr-2" type="text" name="departure" placeholder="Departure">
</div>
<!-- col3 -->
<div class="card border-0">
    <input class="form-control mr-2" type="text" name="destination" placeholder="Destination">
</div>
<!-- col4 -->
<div class="card border-0">
    <input class="form-control mr-2" type="text" name="type" placeholder="Travel Period">
</div>
<!-- Submit -->
<div class="card border-0">
    <input class="btn btn-primary" type="submit" name="" value="go">
</div>

</div><!--/search-box -->
</div> <!-- /card -->

Answer 1

<div class="card container">
    <div class="container">
      <div class="search-box d-md-inline-flex">

      <!-- col1 -->
      <div class="card border-0 p-3">
        <input class="btn btn-primary" type="text" name="" value="All categories">
      </div>
      <!-- col2 -->
      <div class="card border-0 p-3">
          <input class="form-control mr-2" type="text" name="departure" placeholder="Departure">
      </div>
      <!-- col3 -->
      <div class="card border-0 p-3">
          <input class="form-control mr-2" type="text" name="destination" placeholder="Destination">
      </div>
      <!-- col4 -->
      <div class="card border-0 p-3">
          <input class="form-control mr-2" type="text" name="type" placeholder="Travel Period">
      </div>
      <!-- Submit -->
      <div class="card border-0 p-3">
          <input class="btn btn-primary" type="submit" name="" value="go">
      </div>

      </div><!--/search-box -->
    </div>
  </div>

Используйте класс контейнера для переноса содержимого.Для адаптивного использования lg, md, sm для классов.