HTML Table with Pagination and Stay the Pagination Below Even the Table Data is empty

I'm trying to set the pagination much more lower the table regardless its minimum height. I'm using bootstrap. My current issue is that, when the data is empty or let say, it's around 3 item only, the pagination is just below the table. What I want to achieve is something like this:

I'm using bootstrap, here's my sample table: https://jsfiddle.net/wrkaut1x/5/

<table class="table">
<thead>
<th>Header 1</th>
<th>Header 2</th>
</thead>
<tbody>
  <tr>
    <td>No data</td>    
    <td></td>
  </tr>
</tbody>
</table>
<div>
<p>
Pagination here..
</p>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

I hope somebody can help me with this. Thank you!