jQuery DataTables Date Range Styling

I have a Partial View like so:

<div style="float: right;">
    <div class="col-sm-12 col-md-3">
        <div class="input-group date datetimepicker">
            <input id="Min-Date" type="text" class="form-control" placeholder="Start Date" />
            <span class="input-group-addon">
                <span class="fa fa-calendar"></span>
            </span>
        </div>
    </div>

    <span class="col-md-1 fa fa-minus text-center" style="margin-top: 1%;"></span>

    <div class="col-sm-12 col-md-3">
        <div class="input-group date datetimepicker">
            <input id="Max-Date" type="text" class="form-control" placeholder="End Date" />
            <span class="input-group-addon">
                <span class="fa fa-calendar"></span>
            </span>
        </div>
    </div>
</div>





<table id="Test-Table" class="table table-striped">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.randomClass.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ReportDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Attachment)
            </th>
            <th></th>
        </tr>
    </thead>
    <tfoot id="Table-Tfoot">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.randomClass.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ReportDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Attachment)
            </th>
            <th></th>
        </tr>
    </tfoot>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.randomClass.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ReportDate)
                </td>

                <td>
                    <a href="@Url.Content(item.Attachment)" target="_blank">@Path.GetFileName(item.Attachment)</a>
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", "tblAttachments", new { id = item.ID }, null) |
                    @Html.ActionLink("Delete", "Delete", "tblAttachments", new { id = item.ID })
                </td>
            </tr>
        }
    </tbody>
</table>

I am using jQuery DataTables to get searching, paging, and sorting. Here is my jQuery.

@section scripts{
    <script>
        $(document).ready(function () {

            // https://datatables.net/examples/api/multi_filter.html

            var total = $("#Table tfoot th").length;

            $("#Table tfoot th").each(function (index) {
                if (index !== total - 1) {
                    var title = $(this).text().trim();
                    $(this).html('<input type="text" class="form-control" placeholder="Search ' + title +'"/>');
                }
            });


            var table = $("#Test-Table").DataTable({
                "bFilter": false // hide searchbox
            });

            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change',
                    function () {
                        if (that.search() !== this.value) {
                            that
                                .search(this.value)
                                .draw();
                        }
                    });
            });
        });
    </script>
}

As you can see I am hiding the initial search box that comes standard with jQuery datatables.. because I would like to be able to filter by date-range.

I have researched this, but I don't like how the boxes are above the paging dropdownlist.. so on mine.. the search box on the upper right is gone.. and I would like the two input's to take it's place. How can I do this via CSS?

Any help is appreciated.

Here is how it looks now: