PrimeNg TabMenu Angular 11: set last tab on the right

Question

I am using Angular 11 and PrimeNG and styling with Flex.

From PrimeNG I am working now with TabMenu.

Imagine now I want to put three tabs: Tab 1, Tab 2 and Tab 3. I want to have on the left of the browser Tab 1 and Tab 2 and on the right I want only Tab 3.

I am using the next styles:

.p-tabmenu .p-reset {
  width: 100%;
  display:flex;  
  justify-content: flex-start;
  background-color: red !important;
  flex-wrap: wrap;
}

and li childs:

.p-tabmenu .p-reset > li:nth-child(5)  {
  float: right;
}

thisd style angular is not recognizing and I don't understand why.

how can I set Tab 3 on the right using Flex? or maybe with some property of TabMenu?

Answer 1

One solution I found in CSS is:

.p-tabmenu .p-reset {
  position: relative;
}

.p-tabmenu .p-reset > li:nth-child(5)  {
  position: absolute;
  right: 0;
  top: 0;
  
}

with that worked.