Creating a responsive two column form using Contact form 7

Using a child-theme is the best option when editing your themes files.

Code (to insert in the form):

<div id="responsive-form" class="clearfix">

<div class="form-row">
<div class="column-half">First Name [text* first-name]</div>
<div class="column-half">Last Name [text* last-name]</div>
</div>

<div class="form-row">
<div class="column-half">Email [email* your-email]</div>
<div class="column-half">Phone [text* your-phone]</div>
</div>

<div class="form-row">
<div class="column-full">Subject [text* your-subject]</div>
</div>

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

<div class="form-row">
<div class="column-full">[submit "Send"]</div>
</div>

</div><!--end responsive-form-->

Code to paste in your child-theme‘s style.css

#responsive-form{
  max-width: 100% /*-- change this to get your desired form width --*/;
  margin: 0 auto;
        width: 100%;
}
.form-row{
  width: 100%;
}
.column-half, .column-full{
  float: left;
  position: relative;
  padding: 0.65rem;
  width:100%;
  -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
  .column-half{
    width: 50%;
  }
}

Source: http://www.wpsnippet.com/creating-responsive-two-column-form-using-contact-form-7/