I use bootstrap 5

Inside a div of class row there are elements :

<div class="modal fade" id="popup_accompagnement" tabindex="-1" aria-labelledby="popup_accompagnement" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 60vw !important;">
        <div class="modal-content">
            <form id="frmAccompagnement">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="closeModalAccompagnement" style="display: none;"></button>
                </div>
                <div class="modal-body" style="max-height: 60vh; overflow-y: auto;">
                    <div class="row">
                        <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                            <div class="mb-4">
                                <label for="prestationsAccompagnement" class="form-label form-labe-custom">Prestation</label>
                                <select class="form-control select" id="prestationsAccompagnement"></select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-12 col-sm-12 col-12">
                            <div class="mb-4">
                                <label for="accompagnements" class="form-label form-labe-custom">Accompagnement</label>
                                <select class="form-control select" id="accompagnements" multiple size="7"></select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-12 col-sm-12 col-12">
                            <div class="mb-4">
                                <label for="qteAccompagnement" class="form-label form-labe-custom">Quantité</label>
                                <input type="text" class="form-control" id="qteAccompagnement"></select>
                            </div>
                        </div>
                    </div>
                    <strong id="msg_qte_accompagnement_max"
                        th:text="#{restaurant.vae.qte.max.atteint}"
                        style="color:red; font-family: Public Sans; font-style: italic; font-size: 11px !important; display: none;">
                    </strong>
                    <div class="row">
                        <button type="button" class="btn btn-blue034 mx-3 my-2" id="pushPrestaAccompagnement" >+</button>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="mb-12">
                                <table class="table" id="accompagnement_prestas" width="100%">
                                    <thead><tr><th>Prestation</th><th>Accompagnement</th><th>Qte</th><th>PrestationId</th><th>AccompagnementId</th><th>Context</th><th>Actions</th></tr></thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-valid" id="btnOkAccompagnement" th:text="#{button.close}"></button>
                </div>
            </form>
        </div>
    </div>
</div>

As you can see there is this select element having an attribute size set to 7. At runtime the select element is single line displayed :

So how to make the display correct ?