How to make it work in 2 col responsive layout

Hello,
I have a 2 col responsive layout that I use ont he rest of a dev site. When I try to use this set up within contact Form 7 it just won’t work. The right column is on the right where it should be but dropped below the height of the left col if that makes sense? I’ve tried this on a few sites and always the same issue.

Can anyone please advise or help me as it’s driving me mad!

This HTML code below I use within the Contact Form 7 ‘Form’ area and I call the form within my template like so

<?php echo do_shortcode( '[contact-form-7 id="46" title="Contact form 1"]' ); ?>

<div class="form_left_col">
<p>First name (required)<br />
    [text* first-name] </p>

<p>Surname (required)<br />
    [text* surname] </p>

<p>Telephone<br />
[tel tel-117]</p>

<p>Your Email (required)<br />
    [email* your-email] </p>
</div><!-- END form_left_col -->

<div class="form_right_col">
<p>Your enquiry (required)<br />
    [textarea* your-enquiry] </p>

<p>[captchac captcha-514]
Please enter the code (required)<br />
[captchar captcha-514]</p>

<p>[submit "Send"]</p>
</div><!-- END form_right_col -->

This is the css:

.form_left_col {
	width: 48.8%;
	float:left
}

.form_right_col {
	width: 48.8%;
	float:right
}

@media only screen and (max-width: 480px) {

	.form_left_col,
	.form_right_col {
		display:block;width: 100%;
	}
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #666;
    width: 100%;
    border:none!important;
    display:block;
    margin-bottom:10px
}

.wpcf7 textarea
{
    height: 100px;
}

Any help MUCH appreciated! ??

https://www.ads-software.com/plugins/contact-form-7/