Align button underneath CSS

Question

I am using the bootstrap, however, when I put buttons next to the labeled fields, it is aligned on top, as I do to put it to be aligned below?

<div class="box">
<div class="box-body">
    <section>
        <form method="get"
              id="formfield"
              action="rota"
              >
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2 col-xl-2">
                    <label for="dataini">Data Ini:</label>
                    <input type="date"
                            id="dataini"
                            name="dataini"
                            class="form-control"
                            placeholder="00/00/0000"
                            >
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2 col-xl-2">
                    <label for="datafim">Data Fim:</label>
                    <input type="date"
                            id="datafim"
                            name="datafim"
                            class="form-control"
                            placeholder="00/00/0000"
                            >
                </div>
                <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1 col-xl-1">
                    <button type="submit" id="btnFiltrar" class="btn btn-success"><i class="fas fa-search"></i> Pesquisar</button>
                </div>
            </div>
        </form>
    </section>
</div>

It’s getting like this:

Answer 1

Bootstrap 4 Add this class next to the item that has the class 'Row'

align-items-end

Bootstrap 3

.container-row {
    display: flex;
    align-items: flex-end;
}
.bottom-column {
    float: none;
    display: inline-block;
}

Remembering that the class "container-Row" will be added together with the class "Row" and "bottom-column" together with the classes that have the column of the button