Remove the space between 2 elements under each other using flex

I have a side-bar with 2 links. The active route gets a mirrored element in the side-bar like this (see the about link):

What I want is to remove the gap between the 2 Abouts.

Here is the html for the links:

  <div id="sideBarLinks">
            <div className="sidebar-link-singlewrap">
              <Link to="/about">About</Link>
              {location.pathname === '/about' ? <p className="upside-down-p">About</p> : null }
            </div>
            <div className="sidebar-link-singlewrap">
              <Link to="/">Home</Link>
              {location.pathname === '/' ? <p className="upside-down-p">Home</p> : null }
            </div>
            <HeaderSearch />
          </div>

And here is my css for the links:

      #sideBarLinks {
        display: none;
        flex-direction: column;
        gap: 2rem;
        padding-left: 10px;
        .sidebar-link-singlewrap {
          display: flex;
          flex-direction: column;
          a {
            text-decoration: none;
            color: black;
          }
          p {
            margin: 0;
            transform: rotateX(180);
          }
        }
      }

EDIT: Here is the snippit:

div {
  display: flex;
  flex-direction: column;
}
a {
  margin: 0;
}
p {
  margin: 0;
  transform: rotateX(180deg);
}

<div>
  <a>Test</a>
  <p>Test</p>
</div>