Getting text to align in markdown code

See image for reference.

The grey words do not align with the "Example Title" or each other. Is there a way to align them? I'm totally stuck. 

Code:

<h2 style="color: font-size: 21px;"> **Example Title**<span style="color: grey; font-size: 21px; font-weight: 400;"> |</span><span style="color: grey; font-size: 17px; font-weight: 400;"> Washington DC </span><div style="color: grey; text-align: right; font-size: 17px; font-weight: 400;"> Photography: Word </div></h2>

Thanks!

Can you share link to page in screenshot? We can check easier.

2 minutes ago, tuanphan said:

Can you share link to page in screenshot? We can check easier.

Yes my bad. https://puma-orb-9lss.squarespace.com/projects/littlepeek-v4

Lining things up when h tags are involved can be a little tricky as they are block elements. I suggest a different tack by using CSS Grid.

You can put the following into a code block like you've done and see how it looks.

<style>

  .bhs-photo-caption-block {
  
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    
    display: -ms-grid;
    display: grid;
    
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
    
    }
    
  .bhs-photo-caption-block--title, .bhs-photo-caption-block--separator {
  
    font-size: 21px;
    
    }
    
  .bhs-photo-caption-block--title {
  
    font-weight: 900;
    
    }
    
  .bhs-photo-caption-block--category, .bhs-photo-caption-block--location, .bhs-photo-caption-block--separator {
  
    color: grey;
    font-weight: 400;
    
    }
    
  .bhs-photo-caption-block--category, .bhs-photo-caption-block--location {
  
    font-size: 17px;
    
    }
    
  .bhs-photo-caption-block--category {
  
    -ms-grid-column-align: right;
    justify-self: right;
    
    }
       
  </style>
  
<div class="bhs-photo-caption-block">

  <div class="bhs-photo-caption-block--title">
  
    **Example Title**
    
    <span class="bhs-photo-caption-block--separator">
    
      |
      
      </span>
      
    <span class="bhs-photo-caption-block--location">
    
      Washington DC
      
      </span>
      
    </div>
    
  <div class="bhs-photo-caption-block--category">
  
    Photography: Word
    
    </div>
    
  </div>

If you're going to use photo captions under multiple images you can put the CSS into a different location. The CSS could go in a code block at the top of the page or Page Settings > Advanced. If you need it on multiple pages then Design > Custom CSS, minus the style tag.

I made a best guess at class names. Please change if needed to meet your needs.

Let us know how it goes.

13 minutes ago, creedon said:

Lining things up when h tags are involved can be a little tricky as they are block elements. I suggest a different tack by using CSS Grid.

You can put the following into a code block like you've done and see how it looks.

<style>

  .bhs-photo-caption-block {
  
    align-items: baseline;
    display: grid;
    grid-template-columns: auto auto;
    
    }
    
  .bhs-photo-caption-block--title, .bhs-photo-caption-block--separator {
  
    font-size: 21px;
    
    }
    
  .bhs-photo-caption-block--title {
  
    font-weight: 900;
    
    }
    
  .bhs-photo-caption-block--category, .bhs-photo-caption-block--location, .bhs-photo-caption-block--separator {
  
    color: grey;
    font-weight: 400;
    
    }
    
  .bhs-photo-caption-block--category, .bhs-photo-caption-block--location {
  
    font-size: 17px;
    
    }
    
  .bhs-photo-caption-block--category {
  
    justify-self: right;
    
    }
    
  </style>
  
<div class="bhs-photo-caption-block">

  <div class="bhs-photo-caption-block--title">
  
    **Example Title**
    
    <span class="bhs-photo-caption-block--separator">
    
      |
      
      </span>
      
    <span class="bhs-photo-caption-block--location">
    
      Washington DC
      
      </span>
      
    </div>
    
  <div class="bhs-photo-caption-block--category">
  
    Photography: Word
    
    </div>
    
  </div>

If you're going to use photo captions under multiple images you can put the CSS into a different location. The CSS could go in a code block at the top of the page or Page Settings > Advanced. If you need it on multiple pages then Design > Custom CSS, minus the style tag.

I made a best guess at class names. Please change if needed to meet your needs.

Let us know how it goes.

Thanks for looking into this creedon. I also found an article that was explaining aligning different size fonts next to each other, and yes, I'm realizing it's complicated. This is the article I found, I'll check out yours too. https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

I'm not sure this is a proper solution, but I solved it by adjusting line-height for the grey word. 

I'll check out your code and see if it helps, thanks!

See my code:

<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>