Input group with inline start and block-end addon

<script setup lang="ts">
import { Field } from "@/components/ui/field"
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@/components/ui/input-group"
</script>

<template>
  <Field class="max-w-xs">
    <InputGroup>
      <InputGroupAddon class="pr-0 pl-3">
        <InputGroupText class="text-muted-foreground">€</InputGroupText>
      </InputGroupAddon>
      <InputGroupInput placeholder="0.00" class="border-border border-r" />
      <InputGroupAddon align="inline-end" class="pl-2">
        <InputGroupText>EUR</InputGroupText>
      </InputGroupAddon>
    </InputGroup>
  </Field>
</template>