Vertically center inner input with outer button

I have this layout

<div class="container">
  <div class="input-container">
    <input type="text">
    <small>Some text</small>
  </div>
  <button>Click</button>
</div>

Given that

<input type="text">
<small>Some text</small>

is the result of rendering a component from a library that I don’t have much control over it’s style,

I want to know if it’s possible to horizontally center the element with the button element.

I tried doing it with flex and grid but I could not succeed,

Here is the actual code with vuetify component

    <div class="emails-dataset-actions-container">
      <v-text-field
        v-model="searchedDatasetName"
        class="right-gap name-filter-field inline-middle"
        variant="outlined"
        color="primary"
        density="compact"
        :placeholder="$t('filter')"
        @input="onNameFilterInput"
      />
      <v-btn
        class="create-dataset-button"
        style="box-shadow: none"
        color="primary"
        variant="outlined"
        @click="() => openEmailsDatasetEditor()"
        rounded
      >
        <v-icon
          size="17"
          start
        >
          fas fa-plus
        </v-icon>
        {{ $t("emailsDatasets.create") }}
      </v-btn>
    </div>

.emails-dataset-actions-container {
  display: grid;
  grid-template-areas: "input button";
  width: 550px;
}

.name-filter-field {
  grid-area: input;
  width: 250px;
}

.create-dataset-button {
  grid-area: button;
}

and here is the result,
enter image description here

>Solution :

Possible with display: grid and subgrid

.container {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .25em;
}

.input-container {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  align-items: center;
}

button {
  grid-row: 2;
  justify-self: center;
}

<div class="container">
  <div class="input-container">
    <input type="text">
    <small>Some text</small>
  </div>
  <button>Click</button>
</div>