CSS in select Contact Form 7

I have a problem that is killing me with the Wordpress Contact Form 7 and the theme of the select style. I explain:

I have two selects with bootstrap design and they look like this:

As you can see, the addon with the icon is larger than the select itself, which breaks the entire form.

I have tried with css a thousand ways so that the size is the same but nothing works. I found the problem and it resides in the attribute that puts Contact form 7 "wpcf7-form-control-wrap datecamp" that causes that gap to be up.

Would anyone know what I can do to fix it?

Technical data:

Contact form 7 version 5.0.1 Wordpress version 4.9.5

HTML code:

    <div class="row">
        <div class="col-md-6">
                           <div class="form-group">
                <div class="input-group">
   <span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
  [select* anocamp id:anocamp class:form-control class:selectpicker "Seleccione el año del campamento"]
                                     </div>
                           </div>
        </div>
        <div class="col-md-6">
                          <div class="form-group">
                <div class="input-group">
 <span class="input-group-addon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
 [select* fechacamp id:fechacamp class:form-control class:selectpicker "Seleccione la fecha del campamento"]
                                    </div>
                           </div>
        </div>
    </div>

The css of the wpcf7-form-control-wrap is that simple, the css of the rest is basic css of bootstrap.

.wpcf7-form-control-wrap {
    position: relative;
}