How can I vertically align items inside v-text-field and v-select components

I have a toolbar in my Vue app. After a long session, I finalized it but I still have a general problem with aligning items, especially inside the v-text-field and v-select components. The problem is that I tried different options but I feel like there is something wrong or I didn't understand vuetify at all. Here is a list of the problems:

1-The inner items of select and the search icon inside the v-text-field are aligned to the bottom of its parent. How can I vertically align it to the center?

2-I put a max-width for the search bar but its parent is not affected by that. Therefore, the text (Detayli Arama) that comes after it cannot be aligned right next to it.

The code is:

<v-text-field
      hide-details
      height="30px"
      outlined
      dense
      single-line
      append-icon="search"
      class="ml-12"
      placeholder="Kelime, ilan no veya mağaza adı ile ara"
    ></v-text-field>
    <a target="_blank" href @click.stop v-on="on">
      <h5 class="subheading primary--text">Detaylı Arama</h5>
    </a>

    <v-spacer></v-spacer>
    <a target="_blank" href @click.stop v-on="on">
      <v-icon small left color="grey darken-2">email</v-icon>
    </a>
    <a target="_blank" href @click.stop v-on="on">
      <v-icon left small color="grey darken-2">notifications</v-icon>
    </a>
    <a target="_blank" href @click.stop v-on="on">
      <v-icon left small color="grey darken-2">star</v-icon>
    </a>

    <v-select
      v-model="userSelect"
      :items="items"
      height="30px"
      label="Kullanıcı"
      outlined
      dense
      hide-details
      left
      single-line
      class="shrink"
      style="max-width:220px"
    ></v-select>

Styling is handled in main.css

.v-text-field .v-input__control .v-input__slot {
  font-size: 13px;
  letter-spacing: normal;
  text-align: left;
  min-height: 10px !important;
}

.v-input__control {
  max-width: 300px;
}

.v-select {
  font-size: 13px;
}