title: Flex align-items: center only works for one element
body: <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>#draggable-container {
      margin: 0 auto;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
  }
  
  .draggable-game-content {
      width: 100%;
      height: 40rem;
  }
  
  .draggable-game {
      position: relative;
      border: 1px solid black;
      border-radius: 25px;
      margin-left: 1.5rem;
      height: 38rem;
      text-align: center;
  }
  
  #menu-container {
      width: 4rem;
      height: 30rem;
      border: 1px solid #000;
      border-radius: 15px;
      position: relative;
  }
  
  .menu-list {
      position: absolute;
      left: 25%;
      top: 50%;
      transform: translate(-50%, -50%);
  }
  
  .menu-item {
      display: block;
      margin-bottom: 1.5rem;
      border-radius: 50%;
      border: 1px solid #000;
      height: 2.5rem;
      width: 2.5rem;
  }
  
  .menu-item:nth-child(2) {
      margin-bottom: 7rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container"&gt;
      &lt;div id="draggable-container"&gt;
          &lt;div id="menu-container"&gt;
              &lt;ul class="menu-list"&gt;
                  &lt;li class="menu-item"&gt;&lt;/li&gt;
                  &lt;li class="menu-item"&gt;&lt;/li&gt;
                  &lt;li class="menu-item"&gt;&lt;a href="/draggable/gameinfo"&gt;info&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="menu-item"&gt;&lt;a href="/draggable/gamesettings"&gt;settings&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="menu-item"&gt;&lt;a href="/draggable/gameachievements"&gt;achievements&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="draggable-game-content"&gt;
              &lt;div class="draggable-game"&gt;test&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have this page generated by React and I don't understand why the div with &quot;test&quot; stays up while the left menu goes down.</p>
  <p>I want to make them stay at the same level, like this:
  <a href="https://i.stack.imgur.com/vzSqh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vzSqh.png" alt="click" /></a></p>
  <p>I thought I will achieve this by setting align-items to center (so they will center vertically) and start at the same point, but actually it doesn't work.</p>
  <p>Why is my approach not valid and how can I achieve the layout from the page?</p>