How to show the contants in front end same as visual editor with space / linebreak?

My visual editor looks like this:

My text editor looks like this:

But my front end looks like this:

I know that the wordpress automatically removes linebreaks. So I installed tineMCE advace editor and checked "stop removing p and br tags" on the plugin setting. After that line breaks were there. I saw the space. But it was adding p tag on every single line. It was so annoying. So I uninstalled the plugin.

then I added these code snippets on my functions.php

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

Still no luck. in front end I see a single line as my 3rd image.

Then I put this snippet on my functions.php

function clear_br($content){
        return str_replace("br /","br clear='none'/", $content);
    }
    add_filter('the_content', 'clear_br');

Still the result is same as my images above.

My site is member based. So when a member types something on visual editor that should appear in front end as he formatted. We can not ask all the members to learn the HTML.

for now I am in need of two requirements. 1. Line breaks should be kept. when someone press enter the space between the next line should be appeared on front end also. 2. If I achieve that by plugin, I do not want the editor adding p tags on every single line.

How can I do that without using any plugins? Why WP still has such a basic odd editor even the CMS is most popular?