[FEATURE] Input group with SELECT (and TomSelect)

[cavasinf]

Is your feature request related to a problem? Please describe.
Implementing an input for phone number in international format (E.164).
Most users tend to omit the +xxx part and get an error that the number format is not valid (they hate that).
In the end, we implemented our input with Tabler flags + libphonenumber-js + TomSelect.

Describe the solution you'd like
A more seamless input group, like dropdown input group.

Describe alternatives you've considered

Using two input in a .row with .g-1 class

<div class="mb-3">
   <label for="client_phone" class="form-label required">Phone</label><input type="text" id="client_phone" name="client[phone]" data-controller="tel-intl-input" data-tel-intl-input-countries-value="{&quot;DE&quot;:&quot;Allemagne&quot;,&quot;BE&quot;:&quot;Belgique&quot;,&quot;ES&quot;:&quot;Espagne&quot;,&quot;FR&quot;:&quot;France&quot;,&quot;IT&quot;:&quot;Italie&quot;,&quot;PL&quot;:&quot;Pologne&quot;,&quot;GB&quot;:&quot;Royaume-Uni&quot;,&quot;RU&quot;:&quot;Russie&quot;,&quot;CH&quot;:&quot;Suisse&quot;}" data-tel-intl-input-default-country-value="FR" data-tel-intl-input-invalid-message-value="Merci de renseigner un numéro de téléphone valide." class="form-control" hidden="">
   <div class="row g-1">
      <div class="col-auto">
         <select id="tomselect-2" tabindex="-1" class="tomselected ts-hidden-accessible">
            <option value="DE">Allemagne</option>
            <option value="BE">Belgique</option>
            <option value="ES">Espagne</option>
            <option value="IT">Italie</option>
            <option value="PL">Pologne</option>
            <option value="GB">Royaume-Uni</option>
            <option value="RU">Russie</option>
            <option value="CH">Suisse</option>
            <option value=""></option>
            <option value="FR">France</option>
         </select>
         <div class="ts-wrapper single plugin-dropdown_input form-select full has-items">
            <div class="ts-control" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="tomselect-2-ts-dropdown" id="tomselect-2-ts-control" tabindex="0" aria-activedescendant="tomselect-2-opt-4"><span class="flag flag-xs flag-country-fr item" data-value="FR" data-ts-item=""></span><input class="items-placeholder" tabindex="-1" placeholder=""></div>
            <div class="ts-dropdown single plugin-dropdown_input" style="display: none; width: 250px; visibility: visible;">
               <div class="dropdown-input-wrap"><input type="text" autocomplete="off" size="1" tabindex="-1" class="dropdown-input"></div>
               <div role="listbox" tabindex="-1" class="ts-dropdown-content" id="tomselect-2-ts-dropdown">
                  <div data-value="DE" class="option" role="option" data-selectable="" id="tomselect-2-opt-1">
                     <span class="dropdown-item-indicator">
                     <span class="flag flag-xs flag-country-de pe-1"></span>
                     </span>
                     Allemagne
                  </div>
                  <div data-value="BE" class="option" role="option" data-selectable="" id="tomselect-2-opt-2">
                     <span class="dropdown-item-indicator">
                     <span class="flag flag-xs flag-country-be pe-1"></span>
                     </span>
                     Belgique
                  </div>
                  <div data-value="ES" class="option" role="option" data-selectable="" id="tomselect-2-opt-3">
                     <span class="dropdown-item-indicator">
                     <span class="flag flag-xs flag-country-es pe-1"></span>
                     </span>
                     Espagne
                  </div>
                  <div data-value="FR" class="option selected active" role="option" data-selectable="" id="tomselect-2-opt-4" aria-selected="true">
                     <span class="dropdown-item-indicator">
                     <span class="flag flag-xs flag-country-fr pe-1"></span>
                     </span>
                     France
                  </div>
                  <div data-value="IT" class="option" role="option" data-selectable="" id="tomselect-2-opt-5">
                     <span class="dropdown-item-indicator">
                     <span class="flag flag-xs flag-country-it pe-1"></span>
                     </span>
                     Italie
                  </div>
                  <div data-value="PL" class="option" role="option" data-selectable="" id="tomselect-2-opt-6">
                     <span class="dropdown-item-indicator">
                     <span class="flag flag-xs flag-country-pl pe-1"></span>
                     </span>
                     Pologne
                  </div>
                  <div data-value="GB" class="option" role="option" data-selectable="" id="tomselect-2-opt-7">
                     <span class="dropdown-item-indicator">
                     <span class="flag flag-xs flag-country-gb pe-1"></span>
                     </span>
                     Royaume-Uni
                  </div>
                  <div data-value="RU" class="option" role="option" data-selectable="" id="tomselect-2-opt-8">
                     <span class="dropdown-item-indicator">
                     <span class="flag flag-xs flag-country-ru pe-1"></span>
                     </span>
                     Russie
                  </div>
                  <div data-value="CH" class="option" role="option" data-selectable="" id="tomselect-2-opt-9">
                     <span class="dropdown-item-indicator">
                     <span class="flag flag-xs flag-country-ch pe-1"></span>
                     </span>
                     Suisse
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col"><input class="form-control" type="tel" required=""></div>
   </div>
</div>