JSFiddle - React, Tailwind, and code Playground

by Ian Sadovy

HTML

<div class="flex-container">
  <p class="child-1">1</p>
  <p class="child-2">2</p>
  <p class="child-3">3</p>
<!-- <p>4</p>
  <p>5</p>
  <p>6</p> -->
</div>

CSS

body {
  font-family: monospace;
}

p {
  margin: 0;
  padding: 10px;
  text-align: center;
  border: 1px solid blue;
  /* width: 100px; */
}

.flex-container {
  border: 1px solid;

  display: flex;

  flex-direction: column;
  /* flex-direction: column-reverse; */
  flex-direction: row;
  /* flex-direction: row-reverse; */

  /* flex-wrap: wrap; */
  /* flex-wrap: nowrap; */
  /* flex-wrap: wrap-reverse; */

  /* justify-content: center; */
  /* justify-content: flex-start; */
  /* justify-content: flex-end;
  justify-content: space-around;
  justify-content: space-between; */

  /* height: 200px; */
  /* align-items: center; */
  /* align-items: flex-start; */
  /* align-items: flex-end; */
  /* align-items: stretch; */

 /*  align-content: space-between;
  align-content: space-around;
  align-content: stretch;
  align-content: center; */
  /* align-content: flex-start; */
  /* align-content: flex-end; */
}

.child-1 {
  /* order: 2; */
  flex-grow: 1;
}

.child-2 {
  /* order: 3; */
  flex-grow: 1;
}

.child-3 {
  /* order: 1; */
  flex-grow: 2;
  /* align-self: flex-start; */
}