is now part of Shuffle™. The new editor includes templates for Tailwind CSS, Bootstrap, Bulma, and Material-UI.
Switch to Shuffle →
← Tailwind CSS classes list

Tailwind CSS class: .items-stretch / .items-*

<div class="flex items-stretch bg-gray-200 h-20 my-2">
  <div class="flex-1 bg-teal-400 p-2 m-2">1</div>
  <div class="flex-1 bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex items-start bg-gray-200 h-20 my-2">
  <div class="flex-1 bg-teal-400 p-2 m-2">1</div>
  <div class="flex-1 bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex items-center bg-gray-200 h-20 my-2">
  <div class="flex-1 bg-teal-400 p-2 m-2">1</div>
  <div class="flex-1 bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex items-end bg-gray-200 h-20 my-2">
  <div class="flex-1 bg-teal-400 p-2 m-2">1</div>
  <div class="flex-1 bg-teal-400 p-2 m-2">2</div>
  <div class="flex-1 bg-teal-400 p-2 m-2">3</div>
</div>
<div class="flex items-baseline bg-gray-200 h-20 my-2">
  <div class="flex-1 bg-teal-400 p-2 m-2">1</div>
  <div class="flex-1 bg-teal-400 p-2 m-2 text-2xl">2</div>
  <div class="flex-1 bg-teal-400 p-2 m-2">3</div>
</div>

Preview

1
2
3
1
2
3
1
2
3
1
2
3
1
2
3

CSS source

.items-stretch { align-items: stretch; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }

More in Tailwind CSS Flex