Need helping creating a Flex-box container that wraps and is even - html

Question

Trying to create a 2 column, 3 row flexbox container for a food menu. The product elements (which should be 2 per row) do not wrap when shrunk. I'm looking for a way to create a wrapping layout using flexbox. Also, what would be the best way to use Media Queries for the product title to be displayed when the layout is shrunk for mobile-size?
I'm attaching my jsfiddle code:
https://jsfiddle.net/5ksd34nf/#&togetherjs=Ix1LEBTca6
(keep in mind without the images, the design changes so I'm attaching photos)
The HTML is:
`
<section class="menu-page" id="Menu">
<div class="TitleWrapper">
<h1 class="title">Menu</h1>
</div>
<div class="menu-list">
<div class="product">
<div class="imgwrapper">
<img src="images/burger.jpg" alt="Burger" class="food-image">
</div>
<div class="text">
<div class="product-content">
<h3 class="name">Burgers</h3>
<h3 class="price">10 €</h3>
</div>
<div class="ptags">
<p class="allergens">Allergens:</p>
<p class="info">Milk, Gluten</p>
</div>
</div>
</div>
How can I space out the Price from the Name using flexbox?

Answer 1

Basically, you can do something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
border: 1px solid gray;
width: 100%;
margin-bottom: 20px;
}
.flex-sub-item {
display: flex;
justify-content: space-between;
}
#media screen and (min-width: 400px) {
.flex-item {
width: calc((100% - 20px) / 2);
margin-right: 20px;
}
.flex-item:nth-child(2n) {
margin-right: 0;
}
}
<div class="flex-container">
<div class="flex-item">
<div class="flex-sub-item">
<div>Title</div>
<div>Price</div>
</div>
</div>
<div class="flex-item">
<div class="flex-sub-item">
<div>Title</div>
<div>Price</div>
</div>
</div>
</div>