Bootstrap минимальная фиксированная ширина внутри flex

Я пытаюсь сделать панель поиска с помощью bootstrap, похожей на поле поиска 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 -->