bootstrap 5 floating labels select2 width

$(document).ready(function() {
    $('.select2').select2();
});

/* Fix floating label with Select2 */
.form-floating > .select2-container {
  height: calc(3.5rem + 2px);
  width: 100% !important;
}

.select2-container .select2-selection--single {
  height: 100% !important;  
  padding: 1rem 0.75rem 0 0.75rem !important;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 2.4rem;
  padding-left: 0;
  padding-right: 0;
}

/* Optional: remove the border overlap */
.form-floating > label {
  z-index: 5;
}