import { useSplitter } from '@grafana/ui';

const { containerProps, primaryProps, secondaryProps, splitterProps } = useSplitter({
  direction: 'row',
  initialSize: 0.5,
  dragPosition: 'end',
});

return (
  <div {...containerProps}>
    <div {...primaryProps}>
      <Box display="flex" grow={1} backgroundColor="primary" padding={2}>
        Primary
      </Box>
    </div>
    <div {...splitterProps} />
    <div {...secondaryProps}>
      <Box display="flex" grow={1} backgroundColor="primary" padding={2}>
        Secondary
      </Box>
    </div>
  </div>
);