How do I put the bordered text underneath the nav-menu text?

I did a round bordered text right next to the nav-menu. I having issues on how will I put the text underneath the texts. Refer to the image below.

I wanted to put the coming soon texts underneath the COMPANY and CONTACT menu (I don’t mean doing a sub-menu) Below are the code I did for doing this.

<el-menu-item index="4">{{ $t("Tabnav.nav_n") }}</el-menu-item>
<div class = csoon1>
  <span class = text>COMING SOON</span>
</div>
<el-menu-item index="4">{{ $t("Tabnav.nav_n") }}</el-menu-item>
<div class = csoon2>
  <span class = text>COMING SOON</span>
</div>

.text {
  border: 2px solid #00db99;
  border-radius: 10px;
  background-color: #00db99;
  font-size: 13px;
}

Is it possible to put the round bordered text underneath? If not I’ll try make it stick next to the menu text and get them compressed.

Answer

This is something that I think flexbox is really good for.

The code can look something like this – you’d need to adjust for vue.js of course.

<div class="flex-column">
   <el-menu-item index="4">{{ $t("Tabnav.nav_n") }}</el-menu-item>
   <div class = csoon1>
      <span class = text>COMING SOON</span>
   </div>
</div>
<div class="flex-column">
   <el-menu-item index="4">{{ $t("Tabnav.nav_n") }}</el-menu-item>
   <div class = csoon2>
      <span class = text>COMING SOON</span>
   </div>
</div>

So as you can see, I just wrapped each of the two elements with a div and gave it a class of flex-column. Then in CSS you just add.

.flex-column {
   display: flex;
   flex-direction: column;
}