JSFiddle - React, Tailwind, and code Playground

HTML

<div class="logo"></div>
<div class="menu">
  <button class="butt"><span class="textiu">Quem Somos</span><span class="fotiu"></span> </button>
  <button class="butt"><span class="textiu">PortfĂłlio</span><span class="fotiu"></span> </button>
  <button class="butt"><span class="textiu">Contato</span><span class="fotiu"></span> </button>
  <button class="butt"><span class="textiu">Facebook</span><span class="fotiu"></span> </button>
</div>

CSS

.logo {
  background-color: gray;
  height: 50px;
  padding-top: 4%;
  padding-bottom: 2%;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 100%;
}

.textiu {
  display: block;
  background-color: orange;
  padding-top: 5%;
  padding-bottom: 5%;
  background-color: orange;
  color: white;
  transition: background-color, color, 1s;
}

.fotiu {
  display: block;
  background-color: white;
  height: 60px;
}

.butt {
  background-color: Transparent;
  width: 100%;
  padding: 0;
  border: 0;
  position: relative;
  transition: background-color 1s;
  border-right: 1px solid #e6e6ff;
}

JavaScript

$(window).on( "resize",function() {
    var highestText = 0,
        highestBut = 0
         
        $('.textiu').each(function(){  
                if($(this).height() > highestText){  
                highestText = $(this).height();  
        }
         });
         $('.butt').each(function(){  
                if($(this).height() > highestBut){  
                highestBut = $(this).height();  
        }
         });
      $('.butt').height(highestBut);  
    $('.textiu').height(highestText);

});