How do I put a search filter from a DataTable in a different row?

Question

I want to put a search bar that allows me to filter a datatable but the problem is that I can't have them in separate rows.

I tried to change the ID where I thought it could work but nothing shows in the column.

Here is my code and what i want:

HTML + Bootstrap

<div class="card">
 <div class="row">
  <div class="col-6">
   <div class="card-header">
    <h3 class="card-title">Contadores</h3>
   </div>
  </div>
 <div class="col-6">
       "Searchbar here"    
 </div>
 </div>
 <div class="card-body">
  <table> "Table and stuff here"</table>
 </div>
</div>

JQuery

$(document).ready(function(){
    $("#example1").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false, "searching": true,
      "oLanguage": {"sSearch": "Buscar:"}
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    })
})