CSS Grid - Responsive sidebar alignment

I'm trying to make the sidebar logos to be aligned vertically with each other, the same for the texts. But it seems the the logos are been aligned only with the same itens in the row and not with the column.

I wanted to make each other aligned horizontally and vertically as the print shows. I have a codepen sketch to doodle it Codepen

    <div id='sidebar'>
        <ul>
            <li>
                <a href="#" class="sidebar-link">
                    <img src="/icons/001-menu.png" alt="menu-logo">
                    <span class="link-text">Menu</span>
                </a>
            </li>
            <li>
                <a href="#" class="sidebar-link">
                    <img src="/icons/002-portfolio.png" alt="portfolio-logo">
                    <span class="link-text">Portfolio</span>
                </a>
            </li>
            <li>
                <a href="#" class="sidebar-link">
                    <img src="/icons/003-investment.png" alt="strategies-logo">
                    <span class="link-text">Strategies</span>
                </a>
            </li>
            <li>
                <a href="#" class="sidebar-link">
                    <img src="/icons/004-certificate.png" alt="deposit-logo">
                    <span class="link-text">Deposit/Withdraw</span>
                </a>
            </li>
            <li>
                <a href="#" class="sidebar-link">
                    <img src="/icons/005-investor.png" alt="partnerProgram-logo">
                    <span class="link-text">Partner Program</span>
                </a>
            </li>
            <li>
                <a href="#" class="sidebar-link">
                    <img src="/icons/007-property.png" alt="marketAnalysis-logo">
                    <span class="link-text">Market Analysis</span>
                </a>
            </li>
            <li>
                <a href="#" class="sidebar-link">
                    <img src="/icons/008-logout.png" alt="logout">
                    <span class="link-text">Logout</span>
                </a>
            </li>
        </ul>
    </div>

#sidebar ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  padding: 20px;
}

#sidebar li {
  padding: 20px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  height: 1rem;
}

.link-text {
  display: none;
  margin-left: 1rem;
}

#sidebar a {
  text-decoration: none;
  color: black;
}


#sidebar:hover .link-text {
  display: block;
}

#sidebar li:last-child {
  position: absolute;
  bottom: 0;
}

#sidebar img {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 40px;
}

I tried to change the sidebar-link flex-direction to column but it makes the text to be below the logo.I want to do it just by using CSS and HTML.

Solution

What i think is that you have to just add the following code in your css

#sidebar li {
    width: 100%;
    text-align: left;
}

#sidebar img {
    min-width: 40px;
}

#sidebar ul { height: calc(100% - 64px);}

Result