tinymce not showing line breaks

Hello,

I know this question has been asked lots and I have been searching and trying out all the solutions. Still no luck with my issue mind.

I have created a custom meta box called subtitle and added the tinymce to this box so I can have line breaks and web links if needed. However in the admin area the meta box displays a space between lines – great. But on the front-end it shows a space between lines in the code but has not put them in two <p> tags. Thus no actual line break:-

My functions.php

function my_tinymce_config( $init ) {
    $init['remove_linebreaks'] = false;
    $init['convert_newlines_to_brs'] = true;
    //$init['remove_redundant_brs'] = false;
	$init['force_p_newlines'] = true;
	//$init['apply_source_formatting'] = true;

    return $init;
}
add_filter('tiny_mce_before_init', 'my_tinymce_config');

My custom meta box html:-

<div class="metaarea">

    <?php
		$config = array(
		"editor_selector" => "tinymce_data"
		);
		wp_tiny_mce( false, $config);
    ?>

     <script>
	 jQuery(document).ready(function($)
	 {
	  tinyMCE.execCommand('mceAddControl', true, "subtitle");
	 });
	 </script>

	<label for="subtitle">Heading for the second coloured strip:</label>
	<textarea type="text" id="subtitle" name="subtitle"><?php echo $subtitle; ?></textarea>
</div>

How I called the information:-
<p><?php echo get_post_meta($post->ID, 'subtitle', TRUE); ?></p>

What the source code on the page shows:-

<p>First line of text.

Second line of text</p>