Single row layout messed up after update to 5.7

I had created a single row contact form where three fields and the submit button would all be on the same row. I used CSS flex to achieve this and it worked fine till 5.6.4. The layout is totally messed up after update to 5.7 and doesn’t work.

Contact form code:

<div class = "cf7-single-row-flex">
	<label class = "cf7-fi">[text* your-name placeholder "Name"]</label>
	<label class = "cf7-fi">[email* your-email placeholder "Email address"]</label>
	<label class = "cf7-fi">[tel your-phone placeholder "Phone no."]</label>
	<div class = "cf7-fi-submit">[submit "Contact Me"]</div>
</div>

CSS code:

.cf7-single-row-flex
{
	display: flex;
	column-gap: 10px;
}

.cf7-fi
{
	min-width: 0 !important;
	flex: 1.5;
}

.cf7-fi-submit
{
	flex: 1;
}

.cf7-fi-submit input
{
	width: 100%;
}

.wpcf7-spinner
{
	display: none;
}

How it originally looked like: https://i.imgur.com/okPfhNs.png

How it looks like on CF7 5.7: https://i.imgur.com/eikWMiZ.png

For now, I have manually installed 5.6.4 and disabled auto updates.