The explanation hints that button “log it” is that far down because of button “new”. But it’s obviously not relative. So maybe it’s putting as much space above button “log it” as button “new” has between itself and the top of the page?
Yup, that’s how it works. When I group everything they wrap tightly together and button “log it” has 0 vertical margin, because button “new” has 0 vertical margin between itself and the top of the group it’s in.
So when “boxes” wrap down to a new “line” the vertical distance between lines is the same as the vertical distance between the left-most “box” and the top of the container it’s in.
By grouping elements and controlling the margin between the top of their group and the left-most element in side that group, I was able to make this line collapse in a sensible way. I had to give the date-time picker the ability to shrink width to 90%, rather than be fixed width, to get it to stop compressing the date input. Anywho, this works well enough. You can see the red boxes around grouped elements.