I'm attempting to create a simple section with 4 sections - top left, bottom left, top right, and bottom right. I'm unable to do something seemingly very simple. That is, I want an element in the top right to be middle aligned (vertically) within its section and the element in the bottom right to be bottom aligned (vertically) in its section. I don't understand the reason the following doesn't work. Thanks.
<div class="w-full bg-white border-gray-200 rounded-lg shadow"><div class="flex h-full"><div class=" w-2/3 border-r border-gray-500"><div class="bg-red-50 p-4"><div class="h-20"> top left section</div></div><div class="bg-gray-50 p-4"> bottom left section</div></div><div class="w-1/3"><div class="bg-green-50 flex content-center p-4"><div class="block"><!-- I want this guy to be vertically middle aligned --> top right section</div></div><div class="bg-gray-50 flex content-end p-4"><div class="block"><!-- I want this guy to be vertically bottom aligned --> bottom right section</div></div></div></div></div>