No alignment and missing item in a vertical menu - css

Question

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.

Answer 1

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;
}