按钮未对齐的引导程序

问：

我有一个问题，如下代码

<div className="row">
                  <div className="col-md-3">
                    <DateTimePickerComponent
                      id="dateFrom"
                      name="dateFrom"
                      placeholder="Date from"
                      
                    />
                    <div className="d-flex align-items-center error-container">
                      {searchForm.touched.dateFromError && Boolean(searchForm.errors.dateFromError) && (
                        <span className="text-danger small">{searchForm.errors.dateFromError}</span>
                      )}
                    </div>
                  </div>
                  <div className="col-md-4">
                    <DateTimePickerComponent
                      id="dateTo"
                      name="dateTo"
                      placeholder="Date to"
                     
                    />
                    <div className="d-flex align-items-center error-container">
                      {searchForm.touched.dateFromError && Boolean(searchForm.errors.dateFromError) && (
                        <span className="text-danger small">{searchForm.errors.dateFromError}</span>
                      )}
                    </div>
                  </div>

                  <div className="col-md-4 d-flex align-items-center">
                    <DropDownListComponent
                      id="vouType"
                      dataSource={sessionLists}
                      
                    />
                    <Button variant="outlined">Detail</Button>
                  </div>
                </div>
              </div>

当我运行它时，最后一个 DropDownListComponent 和按钮 目前是这个

把它放在中间，我想与像这样的文本框垂直对齐

我能知道如何制作吗？ 我想做这个