Expected behavior I need to center the content and give spacing from the border and control. I need the control and div border have enough spacing.

Actual behavior The control and spacing works perfect when one control is placed, When multiple control are placed the control gets closer to border.

Resources (screenshots, code snippets etc.)

        </div>
        <div class="col">
            <div class="form-outline datepicker" data-mdb-inline="true">
                <input type="text" class="form-control" id="labresulttodate" />
                <label for="labresulttodate" class="form-label">To Date</label>
            </div>
        </div>
        <div class="col d-flex justify-content-center">
            <a id="laboratoryTestViewButton" class="btn btn-primary btn-rounded" role="button"><i class="fas fa-search me-2"></i>Search</a>
        </div>
    </div>

https://mdbootstrap.com/snippets/standard/sriramk18/4149363