Vertically Center Horizontal Line that is Next to Text CSS

Site URL: https://chicory-accordion-k8f6.squarespace.com/

I'm using these accent lines beside sub headers and depending on the screen size they move slightly up or down and de-align the text beside it. Can someone assist me with the CSS if possible?

https://chicory-accordion-k8f6.squarespace.com/ 

Password: Floss

Using line blocks for this effect is going to be problematic. As you've seen things can move around a bit and as the screen gets narrower the blocks will slide under each other in ways that will ruin the effect.

I suggest losing the hr bocks. Move the title text down into the text block below, putting all the text into one block, and remove the text block where the title was.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<style>

  #block-5f5711e4b5e913c476e5 > .sqs-block-content:before,
  #block-3c3e2664ddcb4aaed3eb > .sqs-block-content:before
  
    {
    
      border-top : solid thick #cea02e;
      content : '';
      display : inline-block;
      margin-right : 1em;
      padding-bottom : 0.5em;
      width : 50%;
      
      }
      
  #block-5f5711e4b5e913c476e5 > .sqs-block-content > p:first-child,
  #block-3c3e2664ddcb4aaed3eb > .sqs-block-content > p:first-child
  
    {
    
      display : inline-block;
      
      }
      
  </style>

This is for the first couple of text blocks. You can add more lines for more blocks.

Let us know how it goes.

Awesome. Thanks so much. Works Great!