css Split Layout with Text on Both Sides

Site URL: https://pineapple-giraffe-zll2.squarespace.com/apply

Hello!

https://pineapple-giraffe-zll2.squarespace.com/apply

password: helpwithcss

I've searched but can't really figure out the answer.

I've done lots of split layouts with image on one side and text on the other.

In this case, the gold on the left is a background image, but I also want text on both sides of the layout.

I've tried a few things, and the closest I got was using the ID#s of each element and margin-left or right. BUT when I do that, the text doesn't end up side by side. The maroon text goes on the left but is raised, and the black text/email sign up goes on the right but is low. So they're kitty-corner to each other instead of directly side by side.

The end result should look like this: 

Please help! This is making me batty.  (also bonus points if you can tell me how to make the email sign up look like the above, with the the submit button replaces with an arrow. I'm less concerned about that)

Start with a blank section, add two spacer blocks side-by-side (50/50), and drag your text block under each spacer. But make sure you see the blue line under only the half you want. 
 

this will help you get the setup, you’ll want to identify which half to apply CSS too after you have your layout built.