Margins between varied size elements (heading, input, and button)

Question

I have to design a page with two button choices separated by horizontal rule. The first group has a heading, text input and a button all on new lines.

The group after the horizontal rule has a heading and a button.

I am wondering how to go about determining the margins between the elements in each group as the elements are of different heights, but need to be in proximity of each other.

Are there any best practices useful to solving this problem? I seem to experiment, but every time I come back to the design I want to change it as it doesn't seem right.

I was thinking about baseline grids but I've never used them before.

Answer 1

A baseline grid will distribute each baseline equally, whatever measure you choose. It sounds like you are not happy with regular spacing; but, require irregular vertical spacing to properly group your design elements.

Sounds like you want three distinct design elements. Two button groups and a visual separation.

Best practices suggest aligning similar elements such as the buttons and the headings, and use proximity to establish the groups. The gap where there is no text input on the right side will be a concession to the layout balance.

Maybe the client will provide some text to fill the gap in a review or revision.