JSFiddle - React, Tailwind, and code Playground

by ihope

HTML

<ul class="w-100 flex-container  flex-cols    main-grow">
  <li class="flex-item">
    <ul class=" flex-container  flex-rows">
      <li class="flex-item">1.1</li>
      <li class="flex-item">1.2</li>
      <li class="flex-item">1.3</li>
    </ul>
  </li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
</ul>

CSS

.w-100 {
   width: 100%
 }

 .main-grow li {
   flex-grow: 1;
 }

 @media only screen and (max-width: 600px) {
   .main-grow {
     flex-grow: unset;
   }
 }

 .flex-container {
   padding: 0;
   margin: 0;
   list-style: none;

   -ms-box-orient: horizontal;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -moz-flex;
   display: -webkit-flex;
   display: flex;
   float: left;

 }

 .flex-col {
   flex-direction: row;

 }

 .flex-rows {
   flex-direction: column;
 }

 .flex-start {
   -webkit-align-items: flex-start;
   align-items: flex-start;
 }

 .flex-end {
   -webkit-align-items: flex-end;
   align-items: flex-end;
 }

 .flex-end li {
   background: gold;
 }

 .center {
   -webkit-align-items: center;
   align-items: center;
 }

 .center li {
   background: deepskyblue;
 }

 .baseline {
   -webkit-align-items: baseline;
   align-items: baseline;
 }

 .baseline li {
   background: lightgreen;
 }

 .cross-stretch {
   -webkit-align-items: stretch;
   align-items: stretch;
 }


 .flex-container .flex-container li {
   background: red;
 }

 .cross-stretch li {
   background: hotpink;
 }

 .flex-item {
   background: tomato;

   width: 50px;
   line-height: 50px;
   margin: 5px;
   padding: 5px;

   color: white;
   font-weight: bold;
   font-size: 2em;
   text-align: center;
 }