Aligning several divs next to several other divs - css

Question

I'm trying to align several div containers with several other divs, but am having a problem.
I can't get the red (checkbox-container) divs to align next to the grey (button-container) divs.
Here's what it looks like now (I think the button being cut off at the bottom is just an issue with setting the developer options to view as mobile when I took a screenshot, because it looks alright in codepen).
And this is how I'm trying to make it look.
Could anyone help me out? I was thinking that I could have each checkbox as a child element of the button container, and then position it relative to that. The problem with that method is I want to ensure that when the screen is resized, the red checkbox-container divs don't overlap with anything in the green character-container div. So I figured having a separate div would be the best way to keep everything where it needs to be when the screen is resized, unless I'm mistaken?
Here's a codepen with the full code:
https://codepen.io/TheNomadicAspie/pen/NWjKwxE
And here's the relevant css:
.bottom-container {
position: absolute;
height: 31.8%;
width: 100vw;
background-color: green;
bottom: 0%;
}
.checkbox-grid {
float: right;
background-color: blue;
width: 7.45vh;
height: 100%;
}
.checkbox-container {
background-color: red;
width: 88%;
height: 22.5%;
top: -0.5vh;
margin-top: 0.5vh;
}
.buttons-grid {
float: right;
background-color: pink;
width: 38.2%;
right: 0%;
}
.button-container {
background-color: purple;
width: 88%;
height: 90%;
right: 0%;
margin-top: 0.5vh;
}
.buttons-grid button {
position: relative;
display: block;
background: grey;
height: 7.45vh;
width: 100%;
top: -0.5vh;
right: 0;
text-align: center;
}
And the HTML:
<div id="menu_bar" , class="menu-bar">
<div id="logo", class="logo">
</div>
<div id="title", class="title">Title</div>
<div id="menu", class="menu">
</div>
</div>
<div id="display" , class="display">
<div id="speech_bubble" , class="speech-bubble">
<div id="email_container" class="email-container">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<button id="submit_email_btn" class="buttons">Submit</button>
</div>
<div id="question_text" class="question-text">Question</div>
</div>
</div>
</div>
<div id="bottom_container" , class="bottom-container">
<div id="buttons_grid" , class="buttons-grid">
<div id="button_1_container" , class="button-container">
<button>Button 1</button>
</div>
<div id="button_2_container" , class="button-container">
<button>Button 2</button>
</div>
<div id="button_3_container" , class="button-container">
<button>Button 3</button>
</div>
<div id="button_4_container" , class="button-container">
<button>Button 4</button>
</div>
</div>
<div id="checkbox_grid" , class="checkbox-grid">
<div id="checkbox_1_container" , class="checkbox-container">
</div>
<div id="checkbox_2_container" , class="checkbox-container">
</div>
<div id="checkbox_3_container" , class="checkbox-container">
</div>
<div id="checkbox_4_container" , class="checkbox-container">
</div>
</div>
<div id="character_container" , class="character-container"></div>
</div>
</div>

Answer 1

I was able to get it working. I aligned checkbox-grid to the top of bottom-container, then added a margin-bottom to each checkbox-container until the spacing was correct, and added a margin-right to checkbox-grid to add spacing. Looks perfect now.
.bottom-container {
position: absolute;
height: 31.8%;
width: 100vw;
background-color: green;
bottom: 0%;
}
.checkbox-grid {
display: absolute;
float: right;
background-color: blue;
width: 7.45vh;
height: 100%;
margin-right: 1vh;
}
.checkbox-container {
background-color: red;
width: 100%;
height: 22.5%;
margin-bottom: 0.8vh;
}
.buttons-grid {
float: right;
background-color: pink;
width: 38.2%;
right: 0%;
}
.button-container {
background-color: purple;
width: 88%;
height: 90%;
right: 0%;
margin-top: 0.5vh;
}
.buttons-grid button {
position: relative;
display: block;
background: grey;
height: 7.45vh;
width: 100%;
top: -0.5vh;
right: 0;
text-align: center;
}