title: Contact Form 7 input field wrapping using flexbox
body: <p>So I'm trying to create a form like this using WordPress Contact Form 7 plugin, I think it should work and is accurate, but apparently not:</p>
  <p><a href="https://i.stack.imgur.com/VUD4R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VUD4R.png" alt="enter image description here" /></a></p>
  <p>Instead, I'm left with this:</p>
  <p><a href="https://i.stack.imgur.com/R3vt4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R3vt4.png" alt="enter image description here" /></a></p>
  <p>Here's the HTML:</p>
  <pre><code>&lt;div class:input-flex&gt;
        [text* your-name class:text-color class:mont-regular placeholder &quot;Vārds, Uzvārds*&quot;]
        [email* your-email class:text-color class:mont-regular placeholder &quot;E-pasts*&quot;]  
        [tel* phone-number class:full-width class:mont-regular class:text-color placeholder &quot;Telefons*&quot;]
        [textarea* question  class:full-width class:mont-regular class:text-color placeholder &quot;Jautājums, vai komentārs*&quot;]
  &lt;/div&gt;
  </code></pre>
  <p>Here's the CSS for the layout:</p>
  <pre><code>.input-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 700px;
    width: 100%;
    margin-bottom: 10%;
  }
  
  
  input[type=&quot;text&quot;],
  input[type=&quot;email&quot;],
  input[type=&quot;tel&quot;],
  textarea {
    box-sizing: border-box;
    border: 0;
    border-radius: 6px;
    padding: 2%;
    margin: 10px;
    flex-grow: 1;
    background: rgba(196, 196, 196, 0.4);
    resize: none;
    outline: none;
    letter-spacing: -0.015em;
  }
  
  .full-width{ 
      width: 100%;
      color: #2F4858;
  }
  </code></pre>
  <p>Thanks in advance.</p>
  <p>EDIT: This displays when I inspect element:</p>
  <pre><code>&lt;div class:input-flex&gt;
        &lt;span class=&quot;wpcf7-form-control-wrap your-name&quot;&gt;
             &lt;input type=&quot;text&quot; name=&quot;your-name&quot; value=&quot;Vārds, Uzvārds*&quot; size=&quot;40&quot; class=&quot;wpcf7-form-control wpcf7-text wpcf7-validates-as-required text-color mont-regular&quot; aria-required=&quot;true&quot; aria-invalid=&quot;false&quot;&gt;
        &lt;/span&gt;
        &lt;br&gt;
        &lt;span class=&quot;wpcf7-form-control-wrap your-email&quot;&gt;
             &lt;input type=&quot;email&quot; name=&quot;your-email&quot; value=&quot;E-pasts*&quot; size=&quot;40&quot; class=&quot;wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email text-color mont-regular&quot; aria-required=&quot;true&quot; aria-invalid=&quot;false&quot;&gt;
        &lt;/span&gt;
        &lt;br&gt;
        &lt;span class=&quot;wpcf7-form-control-wrap phone-number&quot;&gt;
            &lt;input type=&quot;tel&quot; name=&quot;phone-number&quot; value=&quot;Telefons*&quot; size=&quot;40&quot; class=&quot;wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel full-width mont-regular text-color&quot; aria-required=&quot;true&quot; aria-invalid=&quot;false&quot;&gt;
        &lt;/span&gt;
        &lt;br&gt;
        &lt;span class=&quot;wpcf7-form-control-wrap question&quot;&gt;
            &lt;textarea name=&quot;question&quot; cols=&quot;40&quot; rows=&quot;10&quot; class=&quot;wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required full-width mont-regular text-color&quot; aria-required=&quot;true&quot; aria-invalid=&quot;false&quot;&gt;Jautājums, vai komentārs*&lt;/textarea&gt; 
        &lt;/span&gt;
     &lt;/div&gt;
  </code></pre>
  <p>Where do these <code>span</code> come from?</p>