Contact Form 7 input field wrapping using flexbox

Question

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:

Instead, I'm left with this:

Here's the HTML:

<div class:input-flex>
      [text* your-name class:text-color class:mont-regular placeholder "Vārds, Uzvārds*"]
      [email* your-email class:text-color class:mont-regular placeholder "E-pasts*"]  
      [tel* phone-number class:full-width class:mont-regular class:text-color placeholder "Telefons*"]
      [textarea* question  class:full-width class:mont-regular class:text-color placeholder "Jautājums, vai komentārs*"]
</div>

Here's the CSS for the layout:

.input-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 700px;
  width: 100%;
  margin-bottom: 10%;
}


input[type="text"],
input[type="email"],
input[type="tel"],
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;
}

Thanks in advance.

EDIT: This displays when I inspect element:

<div class:input-flex>
      <span class="wpcf7-form-control-wrap your-name">
           <input type="text" name="your-name" value="Vārds, Uzvārds*" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required text-color mont-regular" aria-required="true" aria-invalid="false">
      </span>
      <br>
      <span class="wpcf7-form-control-wrap your-email">
           <input type="email" name="your-email" value="E-pasts*" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email text-color mont-regular" aria-required="true" aria-invalid="false">
      </span>
      <br>
      <span class="wpcf7-form-control-wrap phone-number">
          <input type="tel" name="phone-number" value="Telefons*" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel full-width mont-regular text-color" aria-required="true" aria-invalid="false">
      </span>
      <br>
      <span class="wpcf7-form-control-wrap question">
          <textarea name="question" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required full-width mont-regular text-color" aria-required="true" aria-invalid="false">Jautājums, vai komentārs*</textarea> 
      </span>
   </div>

Where do these span come from?

Answer 1

Thanks to all the responses, I figured it out.

All I did was:

1. Got rid of <span> and <br> tags that randomly generated and messed up my code when I compiled it. To do this, put this in functions.php file:

remove_filter('the_content', 'wpautop');

add_filter('wpcf7_form_elements', function($content) {
  $content = preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $content);

  $content = str_replace('<br />', '', $content);
      
  return $content;
});

2. Set the width of the fields I want to display in the same row (in the CSS file):

input[type="text"],
input[type="email"]{
  width: 40%;
}