#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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdafa2a2b9beb9bfacbd8df9e3fbe3fd">[email protected]</a>/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"><a href="/draggable/gameinfo">info</a></li>
<li class="menu-item"><a href="/draggable/gamesettings">settings</a></li>
<li class="menu-item"><a href="/draggable/gameachievements">achievements</a></li>
</ul>
</div>
<div class="draggable-game-content">
<div class="draggable-game">test</div>
</div>
</div>
</div>My React-generated page seems off as the 'test' div remains elevated while the menu shifts downwards.
I strive for them to be at equal levels, just like this: https://i.sstatic.net/vzSqh.png
My initial plan was to use align-items:center to vertically center both elements and have them start from the same point, however, it proves ineffective.
Why is my strategy flawed and what adjustments can I make to mirror the desired layout?