Search Field and Show Entry misaligned jquery table with Bootstrap5 theme

I'm having some trouble with making a simple DataTable with Bootstrap 5 theme. The main issue is that the "show Entry" and "Search bar" are misaligned as well as the page part at the bottom of the table (best seen in the picture bellow). I have to mentioned that if I use other styles, they are aligned. The issue is only for bootstrap 5 themed DataTables

Snip Picture

I have included all the necessary plugins:

<!--css plugins for table-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">


<!--js plugins for table-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>

The html part for the table is pretty basic:

<section class="container shadow">
        <div class="table-responsive">
            <table id="lista_proiecte" class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Judet</th>
                        <th>Localitate principala</th>
                        <th>Siruta superioara</th>
                        <th>Localitati apartenente </th>
                        <th>Sirute inferioare</th>
                        <th>Tipul solicitarii</th>
                        <th>Data intrare</th>
                        <th>Ultimul status</th>
                        <th>Utilizator</th>
                        <th>Deadline</th>
                    </tr>
                </thead>
            </table>
        </div>
</section>

The table is autofilled from SQL database using AJAX. I'm not so sure if it makes a difference but I'll put it here.

$(document).ready(function(){
var dataTable = $('#lista_proiecte').DataTable({
    "processing": true,
    "serverSide": true,
    "order":[],
    "ajax":{
        url:"php/acasa_listaproiecte_fetch.php",
        type:"POST",
        
    },

    "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
    
    createdRow:function(row, data, rowIndex)
    {
        $.each($('td', row), function(colIndex){
            if(colIndex == 1)
            {
                $(this).attr('data-name', 'judet');
                $(this).attr('class', 'judet');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 2)
            {
                $(this).attr('data-name', 'localitate_principala');
                $(this).attr('class', 'localitate_principala');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 3)
            {
                $(this).attr('data-name', 'siruta_superioara');
                $(this).attr('class', 'siruta_superioara');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 4)
            {
                $(this).attr('data-name', 'localitati_apartenente');
                $(this).attr('class', 'localitati_apartenente');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 5)
            {
                $(this).attr('data-name', 'sirute_inferioare');
                $(this).attr('class', 'sirute_inferioare');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 6)
            {
                $(this).attr('data-name', 'tip_solicitare');
                $(this).attr('class', 'tip_solicitare');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 7)
            {
                $(this).attr('data-name', 'data_intrare');
                $(this).attr('class', 'data_intrare');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 8)
            {
                $(this).attr('data-name', 'ultimul_status');
                $(this).attr('class', 'ultimul_status');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 9)
            {
                $(this).attr('data-name', 'nume_utilizator');
                $(this).attr('class', 'nume_utilizator');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
            if(colIndex == 10)
            {
                $(this).attr('data-name', 'deadline');
                $(this).attr('class', 'deadline');
                $(this).attr('data-type', 'text');
                $(this).attr('data-pk', data[0]);
            }
        });
    }
});

})

Solution

This example works well with Bootstrap 5 Theme.
I did a jsfiddle for you: https://jsfiddle.net/bogatyr77/g7ntd8rk/8/
Just play with the Result window and you see the Search and the other Stuff is well adjusted.

$(document).ready(function() {
  $('#lista_proiecte').DataTable({
    ajax: "https://raw.githubusercontent.com/bmehler/employees/main/personal",
    "lengthMenu": [
      [10, 25, 50, -1],
      [10, 25, 50, "All"]
    ],
    "columns": [{
        "data": "id"
      },
      {
        "data": "name"
      },
      {
        "data": "job"
      }
    ],
    "createdRow": function(row, data, dataIndex) {
      $.each($('td', row), function(colIndex) {
        if (colIndex == 1) {
          $(this).attr('data-name', 'judet');
          $(this).attr('class', 'judet');
          $(this).attr('data-type', 'text');
          $(this).attr('data-pk', data.job);
        }
      });
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<section class="container shadow">
  <div class="table-responsive">
    <table id="lista_proiecte" class="table table-striped table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>Judet</th>
          <th>Localitate principala</th>
          <th>Siruta superioara</th>
          <th>Localitati apartenente </th>
          <th>Sirute inferioare</th>
          <th>Tipul solicitarii</th>
          <th>Data intrare</th>
          <th>Ultimul status</th>
          <th>Utilizator</th>
          <th>Deadline</th>
        </tr>
      </thead>
    </table>
  </div>
</section>