How to Display Contact Form 7 Fields on 2 Columns

This is how you split the content of a page on two columns. Now that you got those shortcodes, let`s go back to the Contact Form 7 editor(Wp Dashboard>Contact->Contact Forms: Your contact form) and use them with the fields. The markup of my contact form becomes:

-----------------------------------

    

<div class="column-full">

   <div class="flex-item-right"> 

<div class="column-half"><label>Enter Your Name*[text* name placeholder "Enter Your Name"]</label></div> 

<div class="column-half"><label> Your email*[email* your-email placeholder "Enter Your Email"] </label></div> 

   </div> 

   <div class= "flex-item-left"> 

<div class="column-half"><label> Gender*[select* gender "Mail" "Femail"]<label></div> 

<div class="column-half"><label> Mobile* [tel Mobile placeholder"Enter Your Mobile"] </label>

   </div>

 </div>

<div class="form-row"><label>Enter Your Address*</label>[text* text placeholder "Enter Your Address"]</div>

<div class="form-row"><label> Your Message[textarea your-message]</label></div>

</div>

<label> Upload Your CV [file* cv limit:5242880 filetypes:pdf|doc|docx|ppt|pptx|odt|jpg]</label>

[submit "Submit"]

 

 ------------------------------------ 

 Add Custonm CSS WordPress Additional CSS

  

.form-row{ 
	width: 100%;
  padding:0.65rem;
} 
.column-full{ 
  display: flex;
  flex-wrap: wrap;
	position: relative;
	width:100%;
	-webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        box-sizing: border-box 
} 
.flex-item-left, .flex-item-right {
  width: 100%;
  padding:0.65rem;
}
 
/**---------------- Media query ----------------**/ 
@media only screen and (min-width: 48em) {  
	.flex-item-left, .flex-item-right {
   width: 50%;
}
}