Horizontal resizable layout

<script setup lang="ts">
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
</script>

<template>
  <div class="mx-auto w-full max-w-lg">
    <ResizablePanelGroup direction="vertical" class="rounded-2xl min-h-[300px] border">
      <ResizablePanel :default-size="25">
        <div class="flex h-full items-center justify-center p-6">
          <span class="text-sm font-semibold">Header</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel :default-size="75">
        <div class="flex h-full items-center justify-center p-6">
          <span class="text-sm font-semibold">Content</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  </div>
</template>