Vue-Bootstrap: Increase input field width + responsiveness

Question

I am trying to create an inline form which contains a little weather icon, a select menu and an input field for a country weather application I am building. I am stuck when it comes to increasing the width of my input field so that it is also responsive.

Right now the input fields placeholder is not entirely visible, and I would like it to be + have even more width to spare.

Any help is appreciated, thanks!

What it currently looks like:

What I want it to look like:

Template:

<template>
  <div class="searchbar-container container">
    <b-form
      @submit.prevent="onSubmit(countrySelected, city)"
      class="form-content"
    >
      <div class="form-row">
        <div class="form-group weather-icon col-md-auto">
          <font-awesome-icon icon="cloud-sun" size="2x" />
        </div>
        <div class="form-group col-md-auto">
          <b-form-select v-model="countrySelected">
            <b-form-select-option value="AF">AF</b-form-select-option>
            <b-form-select-option
              v-for="country in countries"
              :key="country.code"
              :value="country.code"
              required
            >
              {{ country.code }}</b-form-select-option
            >
          </b-form-select>
        </div>
        <div class="form-group col-md-7">
          <b-input-group class="">
            <b-input
              class="country-input"
              placeholder="Please enter your location here..."
              v-model="city"
              required
            />
            <b-input-group-append @click="onSubmit(countrySelected, city)">
              <span class="input-group-text">
                <font-awesome-icon icon="search" />
              </span>
            </b-input-group-append>
          </b-input-group>
        </div>
      </div>
    </b-form>
  </div>
</template>

CSS:

.searchbar-container {
  border-radius: 25px;
  -moz-box-shadow: 0 0 3px #ccc;
  -webkit-box-shadow: 0 0 3px #ccc;
  box-shadow: 0 0 3px #ccc;
  background-color: white;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 30px;
}

.form-content {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow : hidden;
}

.weather-icon {
  color: lightblue;
}

.form-group {
  margin-bottom: 0;
}

.form-inline .form-group {
  display: inline-block;
}

.country-input {
  border-right: none;
}

.input-group-text {
  background-color: white;
  cursor: pointer;
}