Как установить расстояние между языком с помощью значка меню вниз при выборе?

Question

Мой код выглядит так:

    <v-select
      v-model="e1"
      :items="states"
      menu-props="auto"
      label="Select"
      hide-details
      prepend-icon="language"
      single-line
      class="custom"
    ></v-select>

Демонстрация и полный код, например, так: https://codepen.io/trendingnews/pen/NWPjbvX

Если я выберу Индонезию, расстояние между написанием на индонезийском языке и меню в виде значков будет оченьпримерка

Но если я выберу английский, расстояние между английским и значком внизу меню будет слишком большим

Как мне сделатьон динамический?

Я пытался установить его с помощью css, но мне все равно не удалось

Answer 1

Добавьте этот CSS в ваш файл CSS, надеюсь, он вам поможет. из-за свойства display flex * это не центр. Протестировал его через ваш кодекс, надеюсь, он будет работать. Дайте мне знать, если не работает.

.v-select__selections {
    align-items: center;
    display: initial;
    flex: 1 1;
    flex-wrap: wrap;
    text-align: center;
    line-height: 18px;
    max-width: 100%;
    min-width: 0;
}