I've been working on the frontend of my chat web app and recently discovered flexbox. I'm struggling to center two elements with a blue background below the "CHAT" heading, aligned with two green elements like a black square. My challenge lies in aligning the green and blue elements both vertically and horizontally. I've experimented with placing them in separate flex containers and wrapping them together, but haven't achieved the desired result. Any suggestions on how I can achieve this? Thank you for your help! https://i.sstatic.net/UxiTX.png
<div class="container-2">
<div class="room-section" id="display-room">
{{room}}
</div>
<div class="room-section">
<nav id="sidebar">
<h4>Rooms</h4>
{% for room in rooms %}
<button id="{{ room|title }}" class="select-room">{{ room|title }}</button>
{% endfor %}
</nav>
</div>
<div class="message-section" id="display-message-section"></div>
<div class="input-section" id="input-area">
<input type="text" id="user_message" placeholder="Type message..." autocomplete="off">
<button type="button" id="send_message">SEND</button>
</div>
</div.container-2 {
display: flex;
flex-direction: column;
}