JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="flex-container">
  <li>11</li>
  <li>22</li>
  <li>33</li>
</ul>

CSS

* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.flex-container {
    display: flex;
   /*  align-content: stretch;
    align-items: flex-start; */
    height: 80px;
    background: #ff0000;
    }
 .flex-container li {   
    flex: 1;
    background: #eeeeee;
    
 }
 .flex-container li:nth-child(1) {
   flex: 2;
 }.flex-container li:nth-child(2) {   
   background: #e4e4e4;
 }