Reports

First of all I gave an id to:

the whole container #section;
the first column #results;
the second column #search.

Then I also stripped off any templating placeholder {{ }} to focus just on the html/css and I arbitrarily filled the table with bogus data.

Now trying to answer to your questions:

How do I align the table to have some space on its left border?

I set a css rule for the #section container to set its padding as padding: 0 1em;

How do I align both the table and the search box so they are equally distanced from the top border?

The content of both those columns already starts at the beginning of their corresponding container. But the results table header was having some padding while the content of the search pane didn't. I changed what appeared in your code as {{ form | crispy }} with an <input type="text"> and its corresponding label styled using bootstrap form classes AND also added a css rule setting padding-top: .75em; over #search. It was enough for them to have the same padding of the table header so they share the same (~) baseline.

What about the Pagination code, is it placed correctly?

It's arbitrary.. for sure it looks correct to have it right below the results. On the other hand I wouldn't agree with having a right page for the search box but that's not up to me.

Another problem is that when there are less than 10 books in the table the height of the table shrinks. How can I fix that?

The table's height corresponds to its content. When you say it shrinks it's not clear what's your concern. Maybe it's related to how it looks compared to the search pane? You clearly asked to have the search box at the top of its container so I still don't get what do you actually mean here.

how to place both the columns at the same height from the top border, not just the search box?

This point was already addressed before.

And finally:

to have a better layout I also used table-responsive instead of table-responsive-sm because otherwise the table overflowed its container overlapping the second column when the resolution didn't hit the sm threshold.

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#section{
  /*this is for the sake of highlighting the box model of the whole container*/
  border: dashed 5px #ccc;  
  margin: 0;
  padding: 0 1em;
}

#results{  
}

#search{
  padding-top: .75em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css" />

<div id="section" class="row">
  
  <div id="results" class="col-8 align-items-stretch">
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <td>Title</td>
            <td>Author</td>
            <td>Price</td>
            <td>Read</td>
            <td></td>
          </tr>
        </thead>

        <tbody>          
          <tr>
            <td>title1</td>
            <td>name1 lastname1</td>
            <td>price1</td>
            <td>true</td>
            <td><a href="">View</a></td>
          </tr>          
          <tr>
            <td>title1</td>
            <td>name1 lastname1</td>
            <td>price1</td>
            <td>true</td>
            <td><a href="">View</a></td>
          </tr>          
          <tr>
            <td>title1</td>
            <td>name1 lastname1</td>
            <td>price1</td>
            <td>true</td>
            <td><a href="">View</a></td>
          </tr>          
          <tr>
            <td>title1</td>
            <td>name1 lastname1</td>
            <td>price1</td>
            <td>true</td>
            <td><a href="">View</a></td>
          </tr>
          <tr>
            <td>title1</td>
            <td>name1 lastname1</td>
            <td>price1</td>
            <td>true</td>
            <td><a href="">View</a></td>
          </tr>          
          <tr>
            <td>title1</td>
            <td>name1 lastname1</td>
            <td>price1</td>
            <td>true</td>
            <td><a href="">View</a></td>
          </tr>          
          <tr>
            <td>title1</td>
            <td>name1 lastname1</td>
            <td>price1</td>
            <td>true</td>
            <td><a href="">View</a></td>
          </tr>          
          <tr>
            <td>title1</td>
            <td>name1 lastname1</td>
            <td>price1</td>
            <td>true</td>
            <td><a href="">View</a></td>
          </tr>          
        </tbody>
      </table>

      <div class="pagination justify-content-left">
        <span>          
          <a href="">Previous</a>          
          <span>Page 1 of 1.</span>          
          <a href="">Next</a>          
        </span>
      </div>
      
    </div>
  </div>

  <div id="search" class="col-4">    
    <form method="get">
      <div class="mb-3">
        <label class="form-label">Title</label>
        <input type="text" class="form-control">
      </div>
      <button type="submit" class="btn btn-primary">Search</button>
    </form>
  </div>
</div>

79381786