Resizable

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize={50}>One</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>Two</ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup orientation="vertical">
  <ResizablePanel defaultSize={50}>Header</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>Content</ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize={30}>Sidebar</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={70}>
    <ResizablePanelGroup orientation="vertical">
      <ResizablePanel defaultSize={40}>Top</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={60}>Bottom</ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>