Flex Box: wrap into open whitespace above bottom of previous box

Question

I am curious if Flex Box can be used to insert an element into white space preceding the height of the last element - I thought there was a way to do it, but I've never attempted it before.

Here's a visual example of what I'm trying to achieve:

Here's my current code (I'm in React 17.02 w/ Chakra-UI 1.6.7/Emotion 11.4.1) :

<Flex
   sx={{
        'flex-basis': 'auto',
        'align-content': 'flex-start',
        'flex-direction': 'row',
        'flex-wrap': 'wrap',
        'max-width': '8.5in',
        'white-space': 'normal',
       }}
     >
     <Education
        align="center"
        border="3px solid black"
      />
     <Skills
       align="center"
       border="3px solid black"
     />
     <Teaching
       align="center"
       border="3px solid black"
     />
</Flex>

Currently trying to accomplish using flex row, but have tried column, and mixing columns + rows.

Unfortunately the white space persists, and I'm not sure what I am hoping to achieve is even possible at this point, but I thought I should ask.