title: No alignment and missing item in a vertical menu
body: <p>I would like to get this result:</p>
  <p><a href="https://i.stack.imgur.com/OYWKX.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OYWKX.gif" alt="enter image description here" /></a></p>
  <p>For now, I don't have much...</p>
  <p><a href="https://i.stack.imgur.com/U0vfN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U0vfN.png" alt="enter image description here" /></a></p>
  <p>I don't understand why I don't have a gray line that separates each menu title? And the arrows are not aligned correctly?</p>
  <p>I tried several things but I give up, the elements are still not aligned and the border-bottom does not appear on each title.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  @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);
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="sidebar" style="border-right: 1px solid black" [ngClass]="{ active: showSideBar }"&gt;
          &lt;div class="logo-details" style="border-bottom: 1px solid black;"&gt;
              &lt;span class="logo_name"&gt;
            &lt;/span&gt;
          &lt;/div&gt;
          &lt;ul id="accordion" class="accordion"&gt;
              &lt;li *ngFor="let menu of menus; let i = index" [class.active]="menu.active"&gt;
                  &lt;ng-container&gt;
                      &lt;div class="menu" (click)="selectMenu(menu)"&gt;
                          &lt;i [class]="menu.iconClass"&gt;&lt;/i&gt; {{ menu.name }}
                          &lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;
                      &lt;/div&gt;
      
                  &lt;/ng-container&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The project is <a href="https://stackblitz.com/edit/github-a7zwem?file=src/styles.css" rel="nofollow noreferrer">here</a>.</p>
  <p>Thanks for your help and your time.</p>