Honeybook embedded Contact Form code is jumbling up my other blocks on page section

Problem: On my contact form page, I have a contact form from Honeybook that uses embedded code.

I'd like to have this form on the right side of the page section while I have other blocks and elements next to it on the left.

Well when I add multiple text blocks or buttons, save my edits, and view the page Live, I notice the blocks on the left side are pushed down vertically and even stretched.

Already Troubleshooted: When I remove the contact form on the right, this problem doesn't happen. If I arrange the layout with the form below the text blocks/button (centered on page), this problem doesn't happen.

Request: Please help figure out what is happening and if the Honeybook contact form code can be modified so I can keep the left and right layout that I desire.

First Form embedded code:

<div class="hb-p-633c4bada8444c000882c3b3-2"></div><img height="1" width="1" style="display:none" src="https://www.honeybook.com/p.png?pid=633c4bada8444c000882c3b3">
<script>
  (function(h,b,s,n,i,p,e,t) {
    h._HB_ = h._HB_ || {};h._HB_.pid = i;;;;
    t=b.createElement(s);t.type="text/javascript";t.async=!0;t.src=n;
    e=b.getElementsByTagName(s)[0];e.parentNode.insertBefore(t,e);
})(window,document,"script","https://widget.honeybook.com/assets_users_production/websiteplacements/placement-controller.min.js","633c4bada8444c000882c3b3");
</script>

Second Form embedded code:

<div class="hb-p-633c4bada8444c000882c3b3-1"></div><img height="1" width="1" style="display:none" src="https://www.honeybook.com/p.png?pid=633c4bada8444c000882c3b3">
<script>
  (function(h,b,s,n,i,p,e,t) {
    h._HB_ = h._HB_ || {};h._HB_.pid = i;;;;
    t=b.createElement(s);t.type="text/javascript";t.async=!0;t.src=n;
    e=b.getElementsByTagName(s)[0];e.parentNode.insertBefore(t,e);
})(window,document,"script","https://widget.honeybook.com/assets_users_production/websiteplacements/placement-controller.min.js","633c4bada8444c000882c3b3");
</script>