Flex align-items: center only works for one element - html

Question

#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;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="draggable-container">
<div id="menu-container">
<ul class="menu-list">
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item">info</li>
<li class="menu-item">settings</li>
<li class="menu-item">achievements</li>
</ul>
</div>
<div class="draggable-game-content">
<div class="draggable-game">test</div>
</div>
</div>
</div>
I have this page generated by React and I don't understand why the div with "test" stays up while the left menu goes down.
I want to make them stay at the same level, like this:
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.
Why is my approach not valid and how can I achieve the layout from the page?

Answer 1

Your's align-items should be flex-start
#draggable-container {
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
}

Answer 2

#draggable-container {
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
align-items: flex-start; // updated this line only
}
.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;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="draggable-container">
<div id="menu-container">
<ul class="menu-list">
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item">info</li>
<li class="menu-item">settings</li>
<li class="menu-item">achievements</li>
</ul>
</div>
<div class="draggable-game-content">
<div class="draggable-game">test</div>
</div>
</div>
</div>

Answer 3

In Flex to align your items, you must use the align-items property.
You can read more about Flex and its properties in this article.
#draggable-container {
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
}