Why is my select box out of place (bootstrap)

Question

As you can see on the first picture below, i am trying to reproduce what you see on the second picture. My problem is that the selection box is out of position and i don't really get why.

I tried to put the width to auto, played with col-sm and col-md without success. I seem to only be able to shrink from left to right but not from bottom to top.

Would be appreciated if someone help out. Thanks a lot !

Here's what it looks like:

Here's what it should look like:

Part of the code:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <div class="panel-body"> <h2>Recevabilité</h2> <br> <div class="panel-body"> <div class="form-group"> <label class="question requis jsRequis control-label col-sm-2 col-md-2" for="SituationTravailleur" id="IdSituationTravailleurLabel"><strong>Type de personne (statut) <span class="sr-only">Obligatoire</span></strong></label> <div class="reponse col-sm-10 col-md-10"> <select class="form-control valid" data-val="true" data-val-required="Le champ « Type de personne (statut) » est requis." id="IdSituationTravailleur" name="SituationTravailleur" onchange="GererListeDeroulante(this)" style="max-width:1020px" aria-required="true" aria-describedby="IdSituationTravailleur-error" aria-invalid="false"><option value="">- Sélectionner une situation -</option> <option value="T">Travailleur (article 2 LATMP)</option> <option value="T18">Travailleur autonome (article 2 LATMP) - Est une personne inscrite à la CNESST en vertu de l'article 18 LATMP</option> <option value="T9">Travailleur autonome considéré comme travailleur (article 9 LATMP)</option> <option value="PRO">Employeur, dirigeant ou membre du conseil d'admin. d'une personne morale (art. 2 LATMP) - Est une pers inscrite à la CNESST en vertu de l'art. 18 LATMP</option> <option value="DOM">Domestique (article 2 LATMP) - Est une personne inscrite à la CNESST en vertu de l'article 18 LATMP</option> <option value="RI">Ressource intermédiaire (article 2 LATMP) - Est une personne inscrite à la CNESST en vertu de l'article 18 LATMP</option> <option value="RF">Ressource de type familial (article 2 LATMP) - Est une personne inscrite à la CNESST en vertu de l'article 18 LATMP</option> <option value="ETU">Étudiant en stage non rémunéré (article 10 LATMP)</option> <option value="GQC">Personne considérée à l'emploi du gouvernement du Québec (article 11 LATMP)</option> <option value="SC">Personne qui intervient dans le cadre de la Loi sur la sécurité civile (article 12 LATMP)</option> <option value="SMI">Personne qui assiste les membres d'un service municipal de sécurité incendie (article 12.0.1 LATMP)</option> <option value="PRI">Personne incarcérée dans un établissement de juridiction provinciale</option> <option value="BEN">Bénévole (article 13 LATMP) - Est une personne inscrite à la CNESST en vertu de l'article 14 LATMP</option> <option value="PEN">Personne visée par une entente (article 16 LATMP)</option> <option value="GCA">Empl. gouv. CA visé dans la Loi sur l'indem. agents de l'État (art.17 LATMP) - La CNESST a obtenu confirmation du statut par EDSC</option> <option value="MIG">Travailleur migran (numéro d'assurance sociale débutant par un 9) - Doit avoir un permis de travail valide</option> <option value="NON">Personne non considérée comme travailleur au sens de la loi</option> </select> <span class="field-validation-valid" data-valmsg-for="SituationTravailleur" data-valmsg-replace="true"></span> </div> </div> <div class="form-group"> <div class="question control-label col-sm-2 col-md-2"> <span class="glyphicon glyphicon-exclamation-sign glyphicon-label" style="margin-right: 5px;" data-toggle="tooltip" data-placement="top" title="" alt="Pour un type de personne non considéré comme un travailleur, il faut préciser sa situation. Exemples: sans permis de travail, ne respecte pas les conditions de son permis de travail, personne qui exécute un travail illégal, militaire, policier de la Gendarmerie Royale du Canada, etc." data-original-title="Pour un type de personne non considéré comme un travailleur, il faut préciser sa situation. Exemples: sans permis de travail, ne respecte pas les conditions de son permis de travail, personne qui exécute un travail illégal, militaire, policier de la Gendarmerie Royale du Canada, etc."> </span> <label for="PreciserSituationTravailleur" id="IdPreciserSituationTravailleurLabel">Préciser</label> </div> <div class="reponse col-sm-4 col-md-4"> <textarea class="form-control resizable" cols="20" id="IdPreciserSituationTravailleur" name="PreciserSituationTravailleur" oninput="GererTexteInput(this)" rows="1" disabled=""></textarea> </div> </div> <div class="form-group"> <fieldset> <legend id="IdEmployeurEtablissementQcLabel" class="question control-label col-sm-2 col-md-2"><strong>L'employeur à un établissement au Québec</strong></legend> <div id="IdEmployeurEtablissementQc" class="reponse radio col-sm-10 col-md-10"> <div class="radio-inline"> <input id="RTRUE" name="EmployeurEtablissementQc" onclick="GererBoutonRadio('IdEmployeurEtablissementQc', 'true')" type="radio" value="True"> <label class="" for="RTRUE">Oui</label> </div> <div class="radio-inline"> <input id="RFALSE" name="EmployeurEtablissementQc" onclick="GererBoutonRadio('IdEmployeurEtablissementQc', 'false')" type="radio" value="False"> <label class="" for="RFALSE">Non</label> </div> </div> </fieldset> </div> </div>

Answer 1

Problem solved just specify select height:

select {
   height: 30px;
]