Stop line break in title using markdown

<h2 style="color: black; font-size: 20px;"> **Example Title**</h2><span style="color: black; letter-spacing: 0.09em; font-size: 20px; font-weight: 400;"> |</span> <span style="letter-spacing: 0.09em; font-size: 14px; font-weight: 400;"> Washington DC </span>

<span style="color: black; letter-spacing: 0.04em; font-size: 17px; font-weight: 300;"> **Example Title**</span> <span style="color: black; letter-spacing: 0.09em; font-size: 20px; font-weight: 400;"> |</span> <span style="letter-spacing: 0.09em; font-size: 14px; font-weight: 400;"> Washington DC </span>

EDIT: Using Markdown

So I'm trying to use the heading font, with a paragraph font next to it (similar to the second example). However using the h2 forces a line break. Is there anyway to prevent this from happening? And to have it only happen in this instance. ie. not across the site. 

To clarify. In the first bit of code I try and use the h2 heading but it causes a line break. 
In the second bit of code I don't use the h2 to show what I want it to look like in terms of placement. But I'd like to use h2 rather than a large version of the paragraph size. 

Thanks.

Edit code 1 to

<h2 style="color: black; font-size: 20px;"> **Example Title**<span style="color: black; letter-spacing: 0.09em; font-size: 20px; font-weight: 400;"> |</span> <span style="letter-spacing: 0.09em; font-size: 14px; font-weight: 400;"> Washington DC </span></h2>

On 9/1/2020 at 5:50 PM, tuanphan said:

Edit code 1 to

<h2 style="color: black; font-size: 20px;"> **Example Title**<span style="color: black; letter-spacing: 0.09em; font-size: 20px; font-weight: 400;"> |</span> <span style="letter-spacing: 0.09em; font-size: 14px; font-weight: 400;"> Washington DC </span></h2>

 

This is great, but the second part (Washington DC) switches to the h2 style. 

I'm looking for the left side to be h2 while the right is p2. I tried messing around with the code but I can't find anything that stops an auto line break when using different styles like that. 

Anyways, if the answer is it's not possible that's okay. 

On 9/4/2020 at 11:03 AM, Marzon said:

This is great, but the second part (Washington DC) switches to the h2 style. 

I'm looking for the left side to be h2 while the right is p2. I tried messing around with the code but I can't find anything that stops an auto line break when using different styles like that. 

Anyways, if the answer is it's not possible that's okay. 

Can you share linkto page where you inserted Markdown? I can check easier.

On 9/12/2020 at 9:15 AM, tuanphan said:

Can you share linkto page where you inserted Markdown? I can check easier.

I'll provide links below

<h2 style="
           display: inline; 
           font-weight: bold;
           "> Little Peek
</h2>
<h2 style="
           display: inline; 
           "> |
</h2> 
<h2 style="
           display: inline;
           font-size: 17px;
           line-height: 31px;
           vertical-align: bottom;
           color: grey;
           ">Washington DC
</h2>

Here was my solution. I also did a version with the paragraph style but the code block to the right was not lining up?? The weirdest part was that it does line up in the editor, just not in the live site (p version)... I did however get it to line up with the example above where I use (h2 version). 

To reiterate: I was able to get the grey "Washington DC" to line up with the main title. But the text on the right side, "Photography: Artist Name" was only lining up using the (h2 version) and not the (p version).

I can live with this solution, but please, if you know something more elegant do tell!

Thanks.