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.

enter image description here

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.