title: jQuery Datatables customize DOM
body: <p>I have this setup for my table:</p>
  
  <pre><code>$(document).ready(function() {
          $('#example').DataTable({
              dom: 'Bfrtilp',
              responsive: true,
              "order": [[ 1, "desc" ]],
              "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Alle"]],
              buttons: [
                  {
                      extend: 'copyHtml5',
                      exportOptions: {
                          columns: [ 0, ':visible' ]
                      }
                  },
                  {
                      extend: 'excelHtml5',
                      title: 'Events export'
                  },
                  {
                      extend: 'pdfHtml5',
                      title: 'Events export'
  
                  },
                  'colvis'
              ],
              "language": {"url": "/vendor/datatables/german.json"}
          });
      });
  </code></pre>
  
  <p>and it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/n77Nf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n77Nf.png" alt="enter image description here"></a></p>
  
  <p>and the problem is that the buttons are not inline with search field and pagination is not inline with "lengthMenu" field. </p>
  
  <p>I want it to be like this:</p>
  
  <p><a href="https://i.stack.imgur.com/zcHg3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zcHg3.png" alt="enter image description here"></a></p>
  
  <p>How can i edit the output for these functions....so they are lined up nicely?</p>