JSFiddle - React, Tailwind, and code Playground

by mrvahid

HTML

<!DOCTYPE html>
<html>
<head>
<style> 

</style>
</head>
<body>

<h1>The flex Propertcy</h1>

<div id="container">
  <div class="col" style="background-color:coral;">RED</div>
  <div class="col" style="background-color:lightblue;">BLUE</div>  
  <div class="col" style="background-color:lightgreen;">Green</div>
  <div class="col" style="background-color:yellow;">Yellow</div>
  <div class="col" style="background-color:black;">black</div>
</div>

</body>
</html>

CSS

#container {
  display: flex;
  flex-wrap: wrap;
}
#container .col {
  margin: 5px;
  background: tomato;
  height: 50px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
#container .col:last-child {
  margin-left: auto;
}