Contact form 7 - 2 column

cf-7-2-column.css

.cf-wrapper{
	position: relative;
}
#left-input {
    width: 47%;
    float: left;
    margin-right:6%;
}
 
#right-input {
    width: 47%;
    float: left;
}
 
.clearfix:after {
    content:"\0020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    margin-bottom:10px;
}
 
.clearfix {
    display:block;
}

@media screen and (max-width: 576px){
	#left-input {
		width: 100%;
		margin-right: 0;
	}

	#right-input{
		width: 100%;
		margin-right: 0;
	}
}

/*--- 2 Column Form Styles End ---*/

cf-7-2-column.html

<div class="clearfix">
    <div id="left">
        First name [text first-name] <br/>
        Last Name[text last-name] <br/>
        How Did You Find Us? [text text-find-us]
    </div>
    <div id="right">
        Email [email* your-email] <br/>
        Phone [text your-phone]
    </div>
</div>
 
Subject [text* your-subject] <br/>
Message [textarea* your-message] <br/>
[submit "Send"]

<div class="cf-wrapper">
	<div class="clearfix">
		<div id="left-input">
			<label> Full Name(required)
	    	[text* your-name] </label>
		</div>	

		<div class="right-input">
		<label>Prefered Time To Contact You
	[text* prefered-time] </label>
		</div>

	</div>

	<div class="clearfix">
		<div id="left-input">
			<label> Your Email
	    [email* your-email] </label>
		</div>	

		<div class="right-input">
		<label>Telephone &bull; Mobile
	[tel* telephone-mobile]</label>
		</div>

	</div>

<div class="clearfix">
	<div class="full-input">
	<label> Message &bull; Inquiry
	    [textarea your-message] </label>

	[submit "Send"]
	</div>
</div>

</div>