Box sizing problem

[Puffy]

I have a problem with box-sizing. I created 2 boxes that define product prices. They were good in column order. I wanted to change them to row order. When I tried, they became so thin. I can’t fix it.
Pen: https://codepen.io/PufflyMuffin/pen/JjrPyyw?editors=1100

[bbsmooth]

A few things sort of jump out at me:

#pricing {
	display: flex;
	width: 20px;
}

What is the purpose of setting width to 20px? That doesn’t seem like enough width to display text in.

.level {
	border: 2px solid darkgreen;
	text-align: center;
	margin-left: 200px;
	margin-right: 200px;
	max-width: 500px;
	box-shadow: 2px 2px 2px 2px;
}

If you are using flexbox to display elements then you shouldn’t need to use side margins because flexbox gives you plenty of ways to put space between elements in a row.

[Puffy]

I am not used to doing display stuff. So I am trying new width and height sizes for testing and understanding better. Thanks for helping tho