CSS Flexbox: align flex item with different width - html

Question

I'm trying to align some flex items with different widths. I can not hit some elements.
https://jsfiddle.net/sistel/m1vu9exf/2/
I cannot align the texts and colored squares as shown in this figure http://www.farmacom.it/baseball.jpg
.flex-container-4 {
display: flex;
height: 70px;
align-items: center;
background-color: Black;
justify-content: space-around;
position:relative;
}
.flex-container-4 > div {
background-color: BLACK;
width: 500px;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 40px;
color: white;
}

Answer 1

I have re-written your code using flex css and removed some unwanted styles. Hope this helps your problem
HTML
<div class="flex-container">
<div class="flex-column">
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="roman-numeric">I</div>
<div class="roman-numeric">II</div>
<div class="roman-numeric">III</div>
</div>
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="text">BALL</div>
</div>
<div class="flex-row">
<div class="green"></div>
<div class="green"></div>
<div class="green"></div>
</div>
</div>
<div class="seperator"></div>
<div class="flex-column">
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="roman-numeric">IV</div>
<div class="roman-numeric">V</div>
<div class="roman-numeric">VI</div>
</div>
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="text">STRIKE</div>
</div>
<div class="flex-row">
<div class="red"></div>
<div class="red"></div>
</div>
</div>
<div class="seperator"></div>
<div class="flex-column">
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="roman-numeric">VII</div>
<div class="roman-numeric">VIII</div>
<div class="roman-numeric">IX</div>
</div>
<div class="flex-row">
<div class="number">18</div>
<div class="number">18</div>
<div class="number">18</div>
</div>
<div class="flex-row">
<div class="text">OUT</div>
</div>
<div class="flex-row">
<div class="orange"></div>
<div class="orange"></div>
</div>
</div>
</div>
CSS
.flex-container {
display: flex;
background-color: Black;
justify-content: start;
padding: 10px 10px;
width: fit-content;
}
.flex-column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.flex-row>.number {
background-color: #444;
width: 100px;
margin: 5px;
text-align: center;
line-height: 75px;
font-size: 60px;
color: yellow;
}
.flex-row>.roman-numeric {
width: 100px;
margin: 5px;
text-align: center;
line-height: 45px;
font-size: 50px;
color: white;
}
.flex-row>.text {
background-color: BLACK;
margin: 5px;
text-align: center;
line-height: 50px;
font-size: 40px;
color: white;
}
.green {
background-color: green;
width: 40px;
height: 40px;
margin: 25px;
}
.red {
background-color: red;
width: 40px;
height: 40px;
margin: 25px;
}
.orange {
background-color: orange;
width: 40px;
height: 40px;
margin: 25px;
}
.seperator {
background: #a5a2a2;
width: 10px;
margin: 0px 15px;
}
JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/2ymefx81/

Answer 2

This is because you created rows and cells from these rows doesn't know about other rows' dimensions - this is why in the last part, "VIII" takes more width than other elements.
One solution is to create columns instead of rows, because in this way, flex container will be of the width of the widest element.

Answer 3

To get exact result you need to change your bit of html structure. If not i have created similar pattern using your current code. please check this:
Baseball Flex