JSFiddle - React, Tailwind, and code Playground

by bvotcode

HTML

<div id="menu-container">
  <div class="menu"></div>
  <div class="menu"></div>
  <div class="menu">
      <div id="sub-menu-container">
          <div class="sub-menu" id="sub-menu1">abc</div>
          <div class="sub-menu" id="sub-menu2">12</div>
          <div class="sub-menu" id="sub-menu3">34</div>
          <div class="sub-menu" id="sub-menu4">56</div>
      </div>
  </div>
  <div class="menu"></div>
</div>

CSS

.menu{
  border-radius:15px;
  background-color: #00ab9e;
  width:120px;
  height:50px;
  border: 1px solid #01eae9;
  display:inline-block;
  margin:5px;
  position:relative;
  vertical-align:top;
}
#sub-menu-container{
  margin-top:50px;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
}
.sub-menu{
  border-radius:15px;
  background-color: #ffb12a;
  width:120px;
  height:50px;
  border: 1px solid #01eae9;
  margin-top:5px;
}
#sub-menu2{
  width:150px;
}

#sub-menu3{
  width:200px;
}

@media only screen and (max-width: 495px) {
    #sub-menu-container {
      align-items: flex-end;
    }
}
@media only screen and (max-width: 420px) {
    #sub-menu-container {
      align-items: flex-start;
    }
}