Columns and rows flex - html

Question

So, I am having an issue where I can mostly get my flexbox working, except when it comes to two columns side by side with uneven rows beside each other. For the life of me I can't figure out why it isn't working.
Here is the screenshot of how it looks now:
http://prntscr.com/ndig4v (by lightshot)
Here is the HTML:
/* Stats */
#stats-container {
width: 100%;
height: 100%;
border: 1px black solid;
}
#free-stats {
width: 100%;
height: 45%;
border: 1px black solid;
}
#stats-column-one,
#stats-column-two {
display: flex;
flex-direction: column;
}
#stats-column-one {
width: 75%;
}
#stats-column-two {
width: 25%;
}
#stats-flex-one,
#stats-flex-two {
display: flex;
flex-direction: row;
}
#str-row,
#end-row,
#dex-row,
#eva-row,
#int-row,
#res-row,
#has-row {
background: black;
display: flex;
flex-direction: row;
position: relative;
width: 55px;
border: 1px yellow solid;
}
<div id="stats-container" class="yellow-black-shadow">
<div id="free-stats">FS</div>
<div id="stats-column-one">
<div id="stats-flex-one">
<div id="str-row">
<div class="stat-icon"></div>
<div id="str">SR</div>
</div>
<div id="dex-row">
<div class="stat-icon"></div>
<div id="dex">DR</div>
</div>
<div id="int-row">
<div class="stat-icon"></div>
<div id="int">IR</div>
</div>
</div>
<div id="stats-flex-two">
<div id="end-row">
<div class="stat-icon"></div>
<div id="str">ER</div>
</div>
<div id="eva-row">
<div class="stat-icon"></div>
<div id="eva">VR</div>
</div>
<div id="res-row">
<div class="stat-icon"></div>
<div id="res">RR</div>
</div>
</div>
</div>
<div id="stats-column-two">
<div id="has-row">
<div class="stats-icon"></div>
<div id="has">HR</div>
</div>
</div>
</div>
Basically everything is correct, until it reaches the HR block, it SHOULD be on the right side. I want avoid using float: right;
I'm pretty sure I am doing this in the wrong order, but I am not sure which order I am messing up. I've played with it some, but each different thing I try I seem to break a bit more, this is the closest I've gotten.

Answer 1

I got it, I forgot the order in which things are supposed to work, but here is the fix
HTML:
<div id="stats-container" class="yellow-black-shadow">
<div id="free-stats">FS</div>
<div id="stats-column-container">
<div id="stats-column-one">
<div id="stats-flex-one">
<div id="str-row">
<div class="stat-icon"></div>
<div id="str">SR</div>
</div>
<div id="dex-row">
<div class="stat-icon"></div>
<div id="dex">DR</div>
</div>
<div id="int-row">
<div class="stat-icon"></div>
<div id="int">IR</div>
</div>
</div>
<div id="stats-flex-two">
<div id="end-row">
<div class="stat-icon"></div>
<div id="str">ER</div>
</div>
<div id="eva-row">
<div class="stat-icon"></div>
<div id="eva">VR</div>
</div>
<div id="res-row">
<div class="stat-icon"></div>
<div id="res">RR</div>
</div>
</div>
</div>
<div id="stats-column-two">
<div id="has-row">
<div class="stats-icon"></div>
<div id="has">HR</div>
</div>
</div>
</div>
</div>
I just wrapped it all in another contain div, and added:
#stats-column-container {
display: flex;
flex-direction: row;
}
I also removed this completely
#stats-column-one,
#stats-column-two {
display: flex;
flex-direction: column;
}
For reference on how it was supposed to look
http://prntscr.com/ndijk0 (by lightshot)
Hope this may help someone understand the order better in the future cause it confuses me sometimes.