No alignment and missing item in a vertical menu

Issue

I would like to get this result:

For now, I don't have much...

I don't understand why I don't have a gray line that separates each menu title? And the arrows are not aligned correctly?

I tried several things but I give up, the elements are still not aligned and the border-bottom does not appear on each title.

  @import url(https://fonts.googleapis.com/css?family=Open+Sans);
    @import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
    *,
    *:before,
    *:after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    h1 {
        font-size: 58px;
    }
    
    h2 {
        font-size: 30px;
    }
    
    ul {
        list-style-type: none;
    }
    
    .sidebar {
        position: fixed;
        height: 100%;
        width: 250px;
        background: #239cd3;
        transition: all 0.5s ease;
    }
    
    
    /* LOGO */
    
    .sidebar .logo-details {
        height: 100px;
        display: flex;
        align-items: center;
    }
    
    .sidebar .accordion {
        font-size: 18px;
        color: white;
        border-bottom: 1px solid #ccc;
        padding: 15px 15px 15px 25px;
    }
    
    .sidebar .accordion li i.fa-chevron-down {
        right: 1rem;
        left: auto;
    }
    
    .sidebar .accordion li.active i.fa-chevron-down {
        transform: rotate(180deg);
    }

    <div class="sidebar" style="border-right: 1px solid black" [ngClass]="{ active: showSideBar }">
        <div class="logo-details" style="border-bottom: 1px solid black;">
            <span class="logo_name">
          </span>
        </div>
        <ul id="accordion" class="accordion">
            <li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
                <ng-container>
                    <div class="menu" (click)="selectMenu(menu)">
                        <i [class]="menu.iconClass"></i> {{ menu.name }}
                        <i class="fa fa-chevron-down"></i>
                    </div>
    
                </ng-container>
            </li>
        </ul>
    </div>

The project is here.

Thanks for your help and your time.

Solution

Concerning the grey divider line and the padding I think this rule...

.sidebar .accordion {
    font-size: 18px;
    color: white;
    border-bottom: 1px solid #ccc;
    padding: 15px 15px 15px 25px;
}

...should be changed to have a different selector which doesn't apply to the ul , but to its li children:

.sidebar .accordion > li {
    font-size: 18px;
    color: white;
    border-bottom: 1px solid #ccc;
    padding: 15px 15px 15px 25px;
}

Concerning the alignment of the downward arrows you could apply display: flex and justify-content: space-between to the .menu elements which are children of the li elements addressed with the CSS rule above, plus apply margin-left: auto;to its last child (= the down-arrow) to have everything before that left-aligned and the arrow right-aligned. In other words, add this:

.sidebar .accordion > li .menu {
    display: flex;
    justify-content: space-between;
}
.sidebar .accordion > li .menu > i.fa.fa-chevron-down {
    margin-left: auto;
}

Answered By - Johannes