Problem with new flexbox containers in Elementor Pro

Hello!

Please can someone help me with this problem. We use custom code in our hero section for our ‘Postcode’ & ‘Quote’ fields, which worked fine with the old column/inner sections. However when we moved over to using the new Flexbox container feature, these containers seem to clash with our custom code as they cause the layout of the hero section to break when we push the page live (Please see the two image attached for examples)

Here is the code we are using too:

<div style=”overflow: hidden;”>

<form id=”postform” style=”display: flex;”>

<input type=”text” autocomplete=”off” id=”txtpostcode” placeholder=”Please enter your postcode”
style=”max-width:250px; border-radius: 8px; font-size: 14px; color: #003e57; font-weight: bold; flex-grow: 1; margin-right: 20px; text-align: center;”>

<input type=”submit” value=”GET A QUOTE” id=”getaquote” style=” border-radius: 8px; font-size: 18px;max-width:250px; “>

</form>

<div id=”post_code_error” style=”color: white; font-size: 18px;”></div>

<style>
/* Styles for the form and button on mobile devices */
@media only screen and (max-width: 600px) {
#form {
flex-direction: column;
max-width: 100%;
}

#form input[type=”text”] {
margin-right: 0; /* Remove the right margin */
max-width: 100%;
margin-bottom: 10px; /* Add a bottom margin for spacing */
width: 100%; /* Set the width to 100% */
box-sizing: border-box; /* Include padding and border in the width */
}

#getaquote {
max-width: 100%; /* Set the width to 100% */
}
}
</style>

Any help will be much appreciated. Thank you!