I want to create custom block that works like columns block in Gutenberg. It's easy to make it horizontally in frontend with CSS but how can I make it appear that way in editor?

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import metadata from '../config/card-row-block.json';

const cardRowTemplate = [
    [ 'cgbms/card-block' ]
];

const allowedBlocks = [
    'cgbms/card-block',
];

registerBlockType(metadata, {
    edit: (props) => {
        const blockProps = useBlockProps();

        return <div className="cgbms_cards_row" { ...blockProps }>
            <InnerBlocks allowedBlocks={ allowedBlocks } renderAppender={ InnerBlocks.ButtonBlockAppender } template={cardRowTemplate} orientation="horizontal" />
        </div>
    },

    save: (props) => {
        const blockProps = useBlockProps.save();
        return <div className="cgbms_cards_row" { ...blockProps }>
            <InnerBlocks.Content />
        </div>
    }
});