Settings: Update FormToggle to align to the top of the label

[ryelle]

Fixes #10899

Toggles should now be aligned to the top line of the label when the label wraps:

To test:

1. Visit the settings screens where toggles are used, for example, Writing
2. Shrink your screen to force the labels to wrap
3. Toggles should stay top-aligned
4. Check other places where toggles are used (Page & post settings in the editor, followed sites management) to make sure these aren't negatively affected.

@rickybanister @MichaelArestad

[matticbot]

Test live: https://calypso.live/?branch=fix/align-form-toggles

[rickybanister]

Vertical alignment of toggle looks great.

Quick question, it appears that the margin between the main toggles and their labels vs the sub-toggles and their labels is different by about 4px, can you confirm and or fix that?

[ryelle]

You're right, it looks like we're setting the margin for JetpackModule toggles to 8px, while the others are 12px. Should it always be 12, or always be 8?

[rickybanister]

I'd guess it should always be 12 if that style pre-dates the module toggles.

@MichaelArestad does that make sense?

[MichaelArestad]

Yeah. It should be 12, but we'll need to update the indent a bit to match so the child toggles line up with the module toggle's label.

[ryelle]

@MichaelArestad I'm not sure what you mean, can you tweak the CSS here (either as a commit to this PR or just drop in a comment)?

[ryelle]

@rickybanister @MichaelArestad #11240's been merged, taking care of the child toggle alignment - is this OK to merge now?

[MichaelArestad]

Tested. Beautiful. Ready to merge. Thanks for tackling this!