Code block causing page section to extend

I've made a demo page from our website to illustrate the issue at https://weis.squarespace.com/panto-test

We're trying to set buttons to scroll the page to an a form, and #anchor links are proving unreliable, even when used according to Squarespace's recommendations.

So instead we are using a code block to create a button - saying Enquire Now - which when clicked uses javascript to scroll to the form at the bottom of the page. The code works well, and I want to put the button beneath the text describing the show, as I have done in the white background page section covering Beauty and the Beast.

Unfortunately the code block etends a long way beneath the button, and creates a huge amount of whitespace beneath it. In the attached screenshot you can see the huge amount of space beneath the button.

What I want to avoid is starting a third column to the right to accommodate the whitespace, as I have done in the pale blue Dick Whittington area below.

What is causing this, and what can I do please?

Thank you @Ziggy. That just about worked for me, and now it only takes up one column and 1 row more than I would like.

Thank you for your help.

That good!

You can see from the shared screenshot that the button exceeds the two rows by a tiny amount, so if you want to reduce the button to two rows you'll need to make the button shorter by reducing the padding.