<div id="completedPatientAppointmentsContentFilterView" class="mb-1 p-5" style="background:linear-gradient(to right, rgba(106, 133, 182, 0.5), rgba(186, 200, 224, 0.5));">

                    <div class="row row-cols-1 row-cols-md-3 rounded-pill bg-white p-3 mb-3">

                        <div class="col">

                            <div class="form-outline datepicker m-2" data-mdb-inline="true">

                                <input type="text" class="form-control" data-provide="datepicker" id="completedAppointmentFromDate" />

                                <label for="completedAppointmentFromDate" class="form-label">From Date</label>

                            </div>

                        </div>

                        <div class="col">

                            <div class="form-outline datepicker m-2" data-mdb-inline="true">

                                <input type="text" class="form-control" id="completedAppointmentToDate" />

                                <label for="completedAppointmentToDate" class="form-label">To Date</label>

                            </div>

                        </div>

                        <div class="col">

                            <button id="showsCompletedAppointmentButton" type="button" class="btn btn-primary btn-rounded m-2 d-flex justify-content-center">Show</button>

                        </div>

                    </div>

                </div>

​

​