Изменяемая длина элемента управления данными и кнопки не выровнены

Question

Я пытаюсь сделать так, чтобы элементы управления вводом и изменением длины выглядели красиво и выровняли их друг с другом, но они просто позиционируют себя и плавают какэто. Я новичок в Datatables и DOM, так что я не знаю, как решить эту проблему. ребята, вы можете мне помочь?

код данных

'destroy': true,
         dom: 'lBfrtip',
        buttons: [
        {
            text: 'Add',
            action: e => window.location.href="",
        },
            'copy', 'csv', 'excel', 'print'
        ],
       'ajax': {
            'url': '{{ url("") }}',
            'type': 'get',
            'dataSrc': e => e,
        },

изменить ... код таблицы

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-mid-12">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table id="usertable" class="table table-striped table-bordered" style="width:100%">
            </table>
        </div>
    </div>
</div>
@endsection