JSFiddle - React, Tailwind, and code Playground

by mcat12

HTML

<body>
  <div id="container">
    <h3>
      The <span class="code">flex-grow</span> Property
    </h3>
    <ul id="flex-grow">
      <li id="item1">1</li>
      <li id="item2">2</li>
      <li id="item3">3</li>
      <li id="item4">4</li>
    </ul>
  </div>
</body>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
}

.code {
	font-family: Courier New, monospace;
	font-weight: bold;
	color: blue;
}

#container {
	height: 200px;
}

p {
  font-size: 18px;
  font-family: Courier New, monospace;
}

ul {
  border: 3px solid blue;
  display: flex;
  flex-flow: row wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
	justify-content: space-around;
	align-items: stretch;
}

li {
	background-color: orange;
  border: 1px solid white;
	font-weight: bold;
	font-size: 2em;
	line-height: 60px;
	margin: 0;
  padding: 0;
	text-align: center;
}


#item1 {
	flex-grow: 1;
}

#item2 {
	flex-grow: 1;
}

#item3 {
	flex-grow: 2;
}

#item4 {
	flex-grow: 1
}