on this test page http://phpby.me/testcss/

if you click "main link" the sub nav will pop up.

I'm trying to get the 'M' in 'main link' to line up vertically with the 'S' in "Sub nav x", no matter how wide the viewport.

"main link" is 30% of viewport width. Where as "sub nav x" is 100% of the parent width. so I can't apply the same amount of padding or text indent % because it's a percentage of different widths.

1 idea I had was close... If I wrap the sub nav text in <span> and give that <span> a width of 30% ( and the text would overflow if need be ) to match the "main link" width I could apply the same, left padding for example. But "main link" is centered text, so it would only work if the main and sub nav text was the same font size and length, which probably won't be the case.

Is it possible to make the text line up in this case?