I've created a draggable divider component that allows you to dynamically resize two sections of a page. Here's what I've built:

1. Basic Draggable Divider: A component that lets you resize two panels by dragging a divider between them.

2. Features:

   • Mouse drag functionality to resize panels
   • Minimum width constraints for both panels
   • Keyboard accessibility (arrow keys to adjust when focused)
   • Smooth transitions during resizing
   • Percentage-based widths that adapt to the container size
   • Visual feedback during dragging

3. Two Implementation Options:

   • DraggableDivider: A self-contained component with built-in content
   • SplitView: A more flexible component that accepts custom content for both panels

4. Example Pages:

   • A simple demo page
   • An advanced page showing width percentages
   • A custom page demonstrating a code editor and preview panel layout

The component is fully responsive and maintains the correct proportions when the window is resized. You can customize the minimum widths for each panel and set the initial split position.

To use this in your project, you can add the component to your codebase by clicking the "Add to codebase" button in the Block view.