How do I avoid a link is closed within a custom text field too soon

Question

I am creating a custom View for my Search API results page. I have many fields added and they are all set to hidden. This allows me to have a custom text field at the end that can have a unique layout.

I am trying to make each search result have a card-based UI - and the whole card needs to be clickable.

So, I have added a link around the entire <div> but it's not working. Drupal is injecting a </a> immediately after the opening <a> tag. This is leaving a 0 pixel tall link.

Here is the code I'm using in the custom text field:

<a href="{{ path('entity.node.canonical', { 'node' : nid}) }}" class="search-people-link">

<div class="search-people">
     <div class="search-people-headshot">
          {{ field_featured_image }}
     </div>
     <div class="search-people-meta">
          <h2>{{ title_1 }}</h2>
          <p>{{ field_designation|length > 50 ? field_designation|slice(0, 50) ~ '...' : field_designation  }}</p>
     </div>
</div>

</a>

I've tried moving the link inside the outer div. I've tried using the "Output as custom link" feature but it did the same thing.

The link wrapping around the entire thing is being closed too early (immediately before the <div class="search-people">. I need that link to make the entire div clickable.