title: How can I put two input elements side by side in the Contact Form 7?
body: <p>I have a contact form in my WordPress website that I made using Contact Form 7 and I want it to look exactly like this form in the below image:<a href="https://i.stack.imgur.com/afL8H.png" rel="nofollow noreferrer">The contact form style i want</a></p>
  
  <p>Below also the CSS code that I used to style this form:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.wpcf7 { 
  /*background-color: #fbefde;*/
  text-align:center;
  color: white;
  align-items: center;
  }
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 textarea {
  text-align: center;
  background-color: #fefefe;
  border-color: #efefef;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-radius: 4px 4px 4px 4px;     
  }
  .wpcf7 input[type="submit"],
  .wpcf7 input[type="button"] { 
  background-color: #fc5f45;
  color: #ffffff;
  font-family: "Poppins", Sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 50px;
  border-radius: 30px 30px 30px 30px;
  padding: 0px 40px 0px 40px;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>But i want two input elements to be on the same line and not just one as in the image below:</p>
  
  <p><a href="https://i.stack.imgur.com/lcD32.png" rel="nofollow noreferrer">The actual contact form</a></p>