Flex Float Problem

How can I get the row that starts with yellow (and any other that will fit) to display next to the Red summary column?

by Adam Heeg

HTML

<body style="width:740px;">
  <div class="flexContainer">
    <div class="red">

      <h3 style="color:#FFFFFF; font-size:11px; background-color:#383838; padding-left:8px; margin:10px 0px 1px 0px;">Ocular History</h3>
      <span style="font-weight:bold; padding-top:5px;">headaches</span>
      <br />
      <h3 style="color:#FFFFFF; font-size:11px; background-color:#383838; padding-left:8px; margin:10px 0px 1px 0px;">Ocular Surgical History</h3>
      <span style="font-weight:bold; padding-top:5px;">corneal</span>
      <br /><span style="font-weight:bold; padding-top:5px;">injection(s) of</span>
      <br /><span style="font-weight:bold; padding-top:5px;">lid procedure of·ectropion repair</span>
      <br /><span style="font-weight:bold; padding-top:5px;">NLD probing</span>
      <br />

      <h3 style="color:#FFFFFF; font-size:11px; background-color:#383838; padding-left:8px; margin:10px 0px 1px 0px;">Vitals</h3>
      <span style="font-weight:bold; padding-top:5px;">Temp: 98.8&nbsp;Deg Fer</span>
      <br /><span style="font-weight:bold; padding-top:5px;">Pulse: a 101 bpm</span>
      <br /><span style="font-weight:bold; padding-top:5px;">Blood Pressure:&nbsp;Sys what?&nbsp;Dia what?</span>
      <br /><span style="font-weight:bold; padding-top:5px;">Respiratory Rate: huh? bpm</span>
      <br /><span style="font-weight:bold; padding-top:5px;">Weight: 199&nbsp;Lizards</span>
      <br /><span style="font-weight:bold; padding-top:5px;">Height: 515&nbsp;Red Ants</span>
      <br /><span style="font-weight:bold; padding-top:5px;">BMI: 21.18 egg</span>
      <br /><span style="font-weight:bold; padding-top:5px;">Blood Glucose Level: bgl&nbsp;233 vh</span>
      <br />
    </div>

    <div class="green">
      Section 1 - should NOT auto fill to bottom of Red column
    </div>

    <div class="yellow">
      Section 2 - should move under section 1 and to the right of the red column
    </div>

    <div class="orange">
      Section 3 - should move next to...

CSS

.flexContainer {
  display: flex;
  width: 740px;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.blue {
  background-color: blue;
  min-height: 25px;
  width: 240px;
  margin-top:10px;
}

.green {
  background-color: green;
  min-height: 40px;
  width: 490px;
  margin-top:10px;
}

.yellow {
  background-color: yellow;
  min-height: 90px;
  width: 240px;
  margin-top:10px;
}

.orange {
  background-color: orange;
  width: 240px;
  min-height: 30px;
  margin-top:10px;
}

.red {
  background-color: red;
  text-align: left;
  vertical-align: top;
  font-size: .8em;
  float: left;
  width: 240px;
}

.CadetBlue {
  background-color: CadetBlue;
  min-height: 40px;
  width: 490px;
  margin-top:10px;
}

.GoldenRod {
  background-color: GoldenRod;
  width: 240px;
  min-height: 30px;
  margin-top:10px;
}

.layoutAuto {
  table-layout: auto;
}

.DataTableWithBorder {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
}

.blackback {
  background-color: black;
}