Justify space between vertically to fill all available space

Issue

I am trying to do a component that has 4 fields, two on the right and two on the left, I have them spaced horizontally but I have not been able to do the same vertically.

Here's the code:

<div class="flex min-h-[3em] bg-blue-500 justify-between">
    <div class="flex flex-col h-full justify-between w-20">
        <span>
            This long content should be on the top left corner, it is long to ilustrate my point with a short width so it grows more vertically
        </span>
        <span>This should be on the left corner</span>
    </div>
    <div class="flex flex-col h-full justify-between">
        <span>This is on the top left corner</span>
        <span> This should be at the bottom right corner </span>
    </div>
</div>

I just want to fill the space vertical space between the span elements.

It seems to be impossible to achieve this the way I want, but it doesn't have to be using divs like I am here.

I want to have each of the 4 fields on each corner of the container, the reason I don't do it with position absolute is because I want them to have "collision" with each other so they don't overlap.

Solution

I think this is a structure issue. There is no real method of aligning elements that do not share a parent. If the structure can be changed then this gets much simpler.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

div div {
  flex-wrap: wrap;
}

span {
  width: 40%;
  background: lightgreen;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
<div class="flex bg-blue-500 justify-between">
  <div class="flex h-full justify-between w-full">
    <span>Some long content to ilustrate my point with a short width so it grows more vertically</span>
    <span>This is on the top left corner</span>
    <span>This should be on the bottom  left corner</span>
    <span> This should be at the bottom right corner </span>
  </div>
</div>

Answered By - Paulie_D