Form component on the same row

Question

I use bootstrap 5 I have a form and i try to put first name and last name on the same row

<form >
    <div id="executorsSection">
    <br>
        <div id="executorSection" class="form-row shadow-lg p-3 mb-3 bg-white rounded">
      
            <div class="form-group col-md-6">
                <label for="firstname" class="form-label">Firstname</label>
                <input type="text" class="form-control" id="firstname" placeholder="Éric">
            </div>
            <div class="form-group col-md-6">
                <label for="lastname" class="form-label">Lastname</label>
                <input type="text" class="form-control" id="lastname" placeholder="Tremblay">
            </div>
            <div class="col-12">
                <label for="city" class="form-label">City</label>
                <input type="text" class="form-control" id="city" placeholder="Brossard">
            </div>
        </div>
        </div>
        <div id="executorSectionAdd">
            <a href="#" class="link-primary" id="addExecutor">Add a new client</a>
        </div>
</form>

An example here

https://www.codeply.com/p/5QTI9XqG65