Tailwind CSS class .self-start / .self-*

<div class="flex items-stretch bg-gray-200 h-24">
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">1</div>
  <div class="self-auto flex-1 text-center bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex items-stretch bg-gray-200 h-24">
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">1</div>
  <div class="self-start flex-1 text-center bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex items-stretch bg-gray-200 h-24">
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">1</div>
  <div class="self-center flex-1 text-center bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex items-stretch bg-gray-200 h-24">
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">1</div>
  <div class="self-end flex-1 text-center bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex items-start bg-gray-200 h-24">
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">1</div>
  <div class="self-stretch flex-1 text-center bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 text-center bg-teal-400 p-2 m-2">3</div>
</div>