JSFiddle - React, Tailwind, and code Playground

by Aziz Natour

HTML

<div id="flexcontainer">
  <div class="flexitem one">1</div>
  <div class="flexitem two">2</div>
  <div class="flexitem three">3</div>
  <div class="flexitem four">4</div>
  <div class="flexitem five">5</div>
</div>

CSS

#flexcontainer {
  width: 500px;
  height: 210px;
  border: 3px solid black;
  display: flex;
  flex-flow: column wrap;
  padding: 5px;
}

.flexitem {
  background: yellow;
  width: 150px;
  text-align: center;
  height: 100px;
  line-height: 100px;
  margin: 2px;
}

.two {
  width: 200px;
  order: 3;
}

.three {
  width: 120px;
  height: 100%;
  order: 5;
}

.five { order: 4; }