Stop flex items stacking on top of each other

Simplicity itself.

body {
  margin: 0;
}
.parent {
  height: 100vh;
  display: flex;
}
.hero {
  flex: 1;
  background: red;
}
.timeline {
  flex: 0 0 640px;
  background: green;
}

<div class="parent">
  <div class="hero"></div>
  <div class="timeline"></div>
</div>

Codepen Demo

Consider these adjustments to your CSS:

div.flex {
    display: flex;
    /* flex-direction: row;   <-- not necessary; default value */
    /* flex-wrap: nowrap;     <-- not necessary; default value */
    /* align-items: stretch;  <-- not necessary; default value */
    height: 100vh;
}

div.hero {
    display: flex;                   /* nested flex container */
    justify-content: space-around;   /* moved here from div.flex, but not even necessary */
    background-size: cover;
    background-position: center bottom;
    position: relative;
    height: 100vh;
    width: 100%;
    /* margin: auto; <-- REMOVE */
}

div.timeline {
    width: 640px;
    /* margin: auto; <-- REMOVE */
}

div.header {
    flex: 1;              
}

DEMO

NOTES:

• When you create a flex container (by applying display: flex or display: inline-flex to an element), the child elements become flex items. The descendants of the flex container beyond the children do not become flex items and, therefore, do not accept flex properties.

  In your code, div.flex is the flex container. This means that its only child – div.hero – is a flex item. The children of div.hero, however, are not flex items. They remain standard block elements, which is why they are stacking vertically.

  Make div.hero a (nested) flex container, so that its children become flex items.

• margin: auto centers a flex item in the container. This doesn't appear to be what you want, so remove it.

• The absolute positioning applied to .header isn't necessary.
• flex: 1 tells a flex item to consume all available space in the container.