I want to position the filter bar and other elements from my datatables table to a complete other part of my page. In particular, I'd like to move the search filter bar to the section titled 'filters' - and in the process, learn how to move any of these elements. However, I can't seem to figure out how to do it and have only had luck moving them to the top and bottom of the table. I've tried with getElementById but had no luck.

This is a simple example code, but please note that I am using a Flask app which draws data in via python and the actual datatable itself is a bit more complicated.

HTML

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Datatables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<div class="filters">
  I have a bunch of filters sitting on the left here and want to move some parts from the datatable here.
</div>
<div class="main">
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
            </tr>
          </tbody>
  </table>
  </div>
          <script>
            $(document).ready(function () {
    $('#example').DataTable();
});
          </script>

CSS

.filters {
    position: fixed;
    width: 34%;
    height: 100%;
    overflow: hidden;
    background-color:lightgray;
}

.main {
    position: absolute;
    width: 66%;
    height: 100%;
    left: 34%;
    top: 10%;
    padding-left:10px;
    padding-top:20px;
}

Desired Result