FormTable.vue

<template>
  <div class="form-table">
    <slot />
  </div>
</template>

<script lang="ts" setup>
import { provide } from 'vue'

defineOptions({
  compatConfig: { MODE: 3 },
})

provide('formGroupClass', 'md:tw-contents')
</script>

<style lang="postcss" scoped>
.form-table {
  @apply tw-flex tw-flex-col tw-gap-3 md:tw-grid md:tw-items-start;

  @media (min-width: theme('screens.md')) {
    grid-template-columns: fit-content(200px) minmax(0, 2fr);
  }
}

.form-table:deep(.form-group) {
  @apply tw-mb-0;
}

.form-table:deep(.form-group-description) {
  @apply md:tw-flex-col md:!tw-mb-0 tw-justify-self-start;
}
</style>