I'm trying to make custom Select component with floating "placeholder". I want to make that "placeholder" is going a little up when the dropdown with options is shown.

Any ideas how to make something like this? "Name" is a "placeholder" which is default, when we don't choose any option from dropdown. After choosing something it should go up.

Select component:

<template>
  <div
    tabindex="0"
    class="relative w-full h-[30px] w-[160px] text-left"
    @blur="open = false"
  >
    <div
      class="h-[30px] w-full border-b border-gray bg-transparent cursor-pointer flex items-center justify-between"
      :class="{ 'pointer-events-none border-gray-cool text-gray-cool': disabled }"
      @click="open = !open"
    >
      {{ selected ? selected : placeholder }}
    </div>
    <div
      class="absolute left-0 right-0 z-10 overflow-hidden bg-white"
      :class="{ 'hidden': !open }"
    >
      <div
        v-for="(option, index) of options"
        :key="index"
        class="cursor-pointer border-b border-gray text-gray"
        @click="handleClick(option)"
        v-text="option"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from '@vue/reactivity'

interface Props {
  options: string[],
  disabled?: boolean,
  placeholder?: string,
}

const props = withDefaults(defineProps<Props>(), {
  options: [] as any,
  disabled: false,
  placeholder: 'Select...',
})

const emit = defineEmits(['input'])

const selected = ref()
const open = ref(false)

const handleClick = (option: string) => {
  selected.value = option
  open.value = false
  emit('input', option)
}
</script>