If you say the wp_list_categories output format is ok to you and all you need is only to remove the links from parent categories, try the following code (you can add it to your functions.php):

add_filter( \'wp_list_categories\', \'sanitize_list_categories_links\', 10, 2 );
function sanitize_list_categories_links( $list, $args ) {
    if ( isset( $args[\'sanitize_links\'] ) && $args[\'sanitize_links\'] ) {
        $list = preg_replace( \'/(<li(?:|\\s[^>]*)>)<a(?:|\\s[^>]*)>(.*?)<\\/a>(\\s*<ul(?:|\\s[^>]*)>)/\', \'$1$2$3\', $list );
    }
    return $list;
}

and then add an extra parameter to your wp_list_categories arguments list:

wp_list_categories( array( ..., \'sanitize_links\' => 1 ) );

This regex will remove <a ...> and </a> HTML tags from <li ...><a ...>Category name</a> string if this string is followed with <ul ...> HTML tag meaning the category has at least one child and left those tags untouched otherwise.

Update

To get the HTML markup similar to your codepen example, you can use

add_filter( \'wp_list_categories\', \'sanitize_list_categories_links\', 10, 2 );
function sanitize_list_categories_links( $list, $args ) {
    if ( isset( $args[\'sanitize_links\'] ) && $args[\'sanitize_links\'] ) {
        $list = preg_replace( \'/(<li(?:|\\s[^>]*)>)<a(?:|\\s[^>]*)>(.*?)<\\/a>(\\s*<ul(?:|\\s[^>]*)>)/\',
                              \'$1<div class="title">$2</div>$3\', $list );
    }
    return $list;
}