JSFiddle - React, Tailwind, and code Playground

by hunguyen170294

HTML

<p>container-stretch</p>

<div class="container container-stretch">
  <div>Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1 Flex item 1</div>
  <div>Flex item 2 Flex item 2 Flex item 2  Flex item 2 Flex item 2 Flex item 2 Flex item 2</div>
  <div>Flex item 3</div>
</div>

<p>container-start</p>

<div class="container container-start">
  <div class="flex-item-1">Flex item 1</div>
  <div class="flex-item-2">Flex item 2</div>
  <div class="flex-item-3">Flex item 3</div>
</div>

<p>container-end</p>

<div class="container container-end">
  <div class="flex-item-1">Flex item 1</div>
  <div class="flex-item-2">Flex item 2</div>
  <div class="flex-item-3">Flex item 3</div>
</div>

<p>container-center</p>

<div class="container container-center">
  <div class="flex-item-1">Flex item 1</div>
  <div class="flex-item-2">Flex item 2</div>
  <div class="flex-item-3">Flex item 3</div>
</div>

<p>container-baseline</p>

<div class="container container-baseline">
  <div>
    <div>Flex item 1Flex item 1Flex item 1Flex item 1</div>
    <div>Flex item 1Flex item 1Flex item 1Flex item 1</div>
  </div>
  <div>
    <a href="#">Flex item 2Flex item 2Flex item 2Flex item 2Flex item 2</a>
  </div>
  <div>Flex item 3</div>
</div>

CSS

div {
  border: solid black 1px;  
}
.container {
  display: flex;
  display: -webkit-flex;
  height: 250px;
}
.container-stretch {
  align-items: stretch;
}
.container-start {
  align-items: flex-start;
}
.container-end {
  align-items: flex-end;
}
.container-center {
  align-items: center;
}
.container-baseline {
  align-items: baseline;
}
.container .flex-item-1 {
  height: 100px;
}
.container .flex-item-2 {
  height: 50px;
}
.container .flex-item-3 {
  height: 150px;
}
.container {
  justify-content: space-between;
}
.container div {
  width: 200px;
}
.container div > div {
  margin-top: 40px;
}