JSFiddle - React, Tailwind, and code Playground

by mcat12

HTML

<body>
  <div id="container">
    <h3>
      The <span class="code">align-self</span> Property
    </h3>
    <ul id="align-self">
      <li id="item1">1</li>
      <li id="item2">2</li>
      <li id="item3">3</li>
      <li id="item4">4</li>
      <li id="item5">5</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: 250px;
}

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

ul {
  border: 3px solid blue;
  display: flex;
  flex-wrap: wrap;
  height: 200px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 600px;
}

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


#item1 {
  align-self: flex-start;
}

#item2 {
  align-self: flex-end;
}

#item3 {
  align-self: center;
}

#item4 {
  align-self: baseline
}

#item5 {
  align-self: stretch;
}