How can I make this code to display the meta tags at the top of the
header section right after ?
You probably can’t. Typically wp_head() is called at the end of the </head> section, but that is theme dependent. You don’t have any control.
How can I put each meta tag on a separate line?
Use double quotes and \n…
$cjt="<meta name="date" content="" . get_the_date().'" />'."\n";
$ct="<meta name="title" content="" . get_the_title().'" />'."\n";
(No idea why you are concatenating empty strings to the beginning and end of your strings, by the way.)
Back to the point, why? You are trying to format code that the browser will render the same whether formatted or not. What you are doing is irrelevant. In fact, it is worse than irrelevant. It introduces unnecessary characters and increases your page size, slowing your site load time. Take a look at any Google search result page. Are you going to argue with Google?
The habit of formatting HTML source harkens back to the days when we were writing HTML source. Doing so made the code readable and maintainable. Now, I write PHP, and given that you are writing WordPress, so do you. Format your PHP source and nevermind the HTML. I actually make an effort to print the HTML all on one line, Google style, but if you don’t want to bother with that at least don’t waste your time trying to format it.
Additionally, per TheDeadMedic’s comment below, your echo should be inside the if conditional, not outside of it.
if ( is_singular( 'article' ) ) {
$cjt="<meta name="date" content="" . get_the_date().'" />';
$ct="<meta name="title" content="" . get_the_title().'" />';
echo $cjt.$ct;
}