How to create a form with two vertically divided sections - html

Question

I am currently trying to create a basic form using HTML & CSS. In it there are 4 fields: amount of men, amount of women, amount of kids and amount of beer per adult.
I want the first three inputs to be on one side, and the fourth to have its own space on the right. I have not been able to achieve this effect. The beer field should be centered horizontally to the right, and beneath it, the input box.
Maybe I should be using a table for this but alas, I am very new to CSS and am honestly a bit clueless.
body {
display: flex;
align-items: center;
justify-content: center;
}
#app {
border: 1px dotted black;
padding: 1.5em;
width: 30em;
}
#left-div {
display: inline-block;
padding: 0.5em;
border: 1px dotted black;
}
#left-div input {
width: 2em;
margin: 0.5em;
}
#left-div label {
margin: 0.5em 0em 0.5em 0em;
display: inline-block;
}
/* Chopp */
#div-chopp {
display: inline-flex;
border: 1px dotted black;
padding: 0.5em;
}
#div-chopp label {
display: block;
}
#div-chopp input {
width: 2em;
}
<div id="app">
<form action="POST">
<div id="left-div">
<label for="men">Men</label>
<input type="number" value="0" name="men">
<br>
<label for="women">Women</label>
<input type="number" value="0" name="women">
<br>
<label for="kids">Kids</label>
<input type="number" value="0" name="kids">
</div>
<div id="div-chopp">
<label for="beer">Litros de Beer por Adulto</label>
<input type="number" value="0" name="beer">
</div>
</form>
</div>

Answer 1

Here's a start. You could use more custom classes instead of the descendant selectors. Avoid using IDs, though, so your CSS is reusable.
body {
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
display: flex;
border: 1px dotted black;
padding: 1.5em;
width: 30em;
}
.wrapper>div {
display: flex;
flex-direction: column;
padding: 0.5em;
border: 1px dotted black;
}
.wrapper>div>div {
display: flex;
justify-content: space-between;
}
.wrapper>div:last-child>div {
justify-content: center;
}
.wrapper input {
width: 2em;
margin-left: .5em;
}
<div id="app">
<form action="POST">
<div class="wrapper">
<div>
<div>
<label for="men">Men</label>
<input type="number" value="0" name="men">
</div>
<div>
<label for="women">Women</label>
<input type="number" value="0" name="women">
</div>
<div>
<label for="kids">Kids</label>
<input type="number" value="0" name="kids">
</div>
</div>
<div>
<div>
<label for="beer">Litros de Beer por Adulto</label>
</div>
<div>
<input type="number" value="0" name="beer">
</div>
</div>
</div>
</form>
</div>