Flex box do not line up with each other

I have two rows of flexbox. The first row has 3 items, each takes up 4 columns. The second row has 2 items, one takes up 4 columns and the other takes up 8 columns. But when the two rows are stacked together, the sizes of each row do not match with each other. i.e. the first item on each row have different sizes.

Here is a picture of what I meant: https://i.sstatic.net/lWcTr.jpg

.flex-display {
    display: flex;
}
.pretty-container {
    background-color: rgb(38, 47, 53);
    margin: 5px;
    padding: 10px;
    position: relative;
}
.container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
    box-sizing: border-box;
    background-color:rgb(54, 69, 79);
}
.four.columns { width: calc(100% / 3); }
.eight.columns { width: calc(100% / 3 * 2); }

body {
    font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
    line-height: 1.6;
    font-weight: 400;
    font-family: "Open Sans", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #EBEBEB; }

<body>
    <div class="container">
        <div class="row flex-display" style="justify-content: space-between;">
            <div id="test4-container" class="pretty-container four columns">
                <div>
                    <div class="section-banner">Item 1</div>
                    <div id="test4"></div>
                </div>
            </div>
            <div id="test5-container" class="pretty-container eight columns">
                <div>
                    <div class="section-banner">Item 2</div>
                    <div id="test5"></div>
                </div>
            </div>
        </div>
        <div class="row flex-display" style="justify-content: space-between;">
            <div id="test1-container" class="pretty-container four columns">
                <div>
                    <div class="section-banner">Item 3</div>
                    <div id="test1"></div>
                </div>
            </div>
            <div id="test2-container" class="pretty-container four columns">
                <div>
                    <div class="section-banner">Item 4</div>
                    <div id="test2"></div>
                </div>
            </div>
            <div id="test3-container" class="pretty-container four columns">
                <div>
                    <div class="section-banner">Item 5</div>
                    <div id="test3"></div>
                </div>
            </div>
        </div>
    </div>
</body>

Solution

I would suggest you to use CSS Grid for your solution. I have explained the grid-area in the comments. Otherwise the other styles are yours.

body {
  font-size: 1.5em;
  /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Open Sans", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #EBEBEB;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 Columns */
  grid-template-rows: 1fr 1fr; /* 2 Columns */
  grid-column-gap: 15px; /* Margin between columns */
  grid-row-gap: 15px; /* Margin between rows */
  background: #36454F;
  padding: 10px;
}

.container > div {
  padding: 5px 15px;
  background-color: rgb(38, 47, 53);
  border-bottom: 2px solid grey;
}

.top-tracks1 {
  grid-area: 1 / 1 / 2 / 2; /* Start at 1, End at 2 */
}

.top-artists1 {
  grid-area: 1 / 2 / 2 / 4; /* Row start at 1 and end at 2, Column start at 2 and end at 4 */
}

.top-tracks2 {
  grid-area: 2 / 1 / 3 / 2; /* Row Start at 2 and end at 3, Column start at 1 and end at 2 */
}

.top-artists2 {
  grid-area: 2 / 2 / 3 / 3; /* Row Start at 2 and end at 3, Column start at 2 and end at 3 */
}

.summary {
  grid-area: 2 / 3 / 3 / 4; /* Row Start at 2 and end at 3, Column start at 3 and end at 4 */
}

<div class="container">
  <div class="top-tracks1"> Top Tracks </div>
  <div class="top-tracks2"> Top Tracks </div>
  <div class="top-artists1"> Top Artists </div>
  <div class="top-artists2"> Top Artists </div>
  <div class="summary"> Summary </div>
</div>