it is much easier to select such elements if they were separated only in one surrounding container.
Means if they were alone f.e. in one color-section. – next we do not need on grid-layout or on flex-layout the need to set same height option – we can do that on different ways.
It is alway a good practice to have for special solutions a unique selector – means f.e. a unique ID or class on that surrounding container.

so now let all as it is and put this to your child-theme quick css:

#top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table .av-flex-placeholder {
  display: none !important
} 

#top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table {
  display: grid !important;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
} 

#top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table .flex_column {
  width: unset !important;
  margin: 0 !important
} 

@media only screen and (min-width:560px) and (max-width: 989px){
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  } 

  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table > .flex_column:nth-of-type(n+6) {
    left: calc(50% + 10px) /*** just if you like to center last 2 items *****/
  }
}

@media only screen and (min-width:320px) and (max-width: 559px){
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  } 
  
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table .flex_column:last-of-type  {
    left: calc(50% + 5px) /*** just if you like to center last item *****/
  }
  
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table .flex_column p {
    font-size: 17px;
    line-height: 24px
  } 
}

@media only screen and (max-width: 319px){
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table  {
    display: grid !important;
    grid-template-columns: 1fr; 
    gap: 10px;
  }   
}

5 to 3/2 to 2/2/1 screen sizes lower than 320px will end in 1 column layout.
just shrink your window size to see what happens on responsive case.

so – zunächst – bitte nicht bei den Enfold Optionen unter “Main Menü” die Option : “Append Search Icon To Main Menu” auswählen. Das wäre dann nämlich die Lupe.

Wie oben beschrieben das in die child-theme functions.php:

add_shortcode('avia_search', 'get_search_form');

function avf_add_search( $items, $args ){
  if ($args->theme_location == 'avia'){
	  $search = '<li id="menu-item-search" class="menu-item menu-search menu-item-top-level">';
	  $search .= do_shortcode('[avia_search]');
	  $search .= '</li>';
    $items =  $items . $search;
  }
  return $items;
}
add_filter( 'wp_nav_menu_items', 'avf_add_search', 10, 2 );

und das hier in das quick css:

.av-main-nav-wrap > ul:first-of-type {
  display: inline-flex !important;
  height: 100%;
}

#menu-item-search {
  line-height: 30px;
  position: relative;
}

#menu-item-search #searchform {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  line-height: 40px;
}

#top #searchform > div:first-of-type {
  position: relative;
  max-width: 200px;
  opacity: 1 !important;
  display: block !important;
}

#menu-item-search #searchform #s {
  padding: 10px 40px 10px 5px;
  font-size: initial;
  background-color: rgba(255,255,255,0.85);   /*** if you like to have transparency ***/ 
}

#top #searchform .ajax_search_response {
  background-color: rgba(255,255,255,0.85);
  position: absolute;
  top: 45px;
  padding: 10px 0;
  width: 100%;
}

hier kannst du sogar alle Home Varianten durchgehen – passt immer ( unter Home ist das Dropdown )
4 entspricht dann deiner Header Setzung.

https://basis.webers-testseite.de/home4/

no – i know now that i misunderstood your question – you do not want a two line menu – you want to have the menu-items labels in two lines.
Just a moment: …
Ismaels Code will work – if you got no shrinking header – but there are solutions for shrinking header too.

Just one moment – i think i got a more simple method now ! …

put in that Navigation Label of the menu-item:
( you only need those classes on the spans if you like to colorise them separatly or if they should have different font-styles )

<span class="firstline">Leistungen</span><span class="secondline">Portfolio</span>

give to the menu-item itself a class: twoliners

click to enlarge the image:

put this to your quick css

#avia-menu .twoliners.menu-item-top-level > a > .avia-menu-text {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr;
  padding: 0px 10px !important;
}

#avia-menu .twoliners.menu-item-top-level > a > .avia-menu-text > span {
  justify-self: center;
  grid-column: 1 / 2;
  align-self: center;
}

#top #wrap_all #avia-menu .twoliners.menu-item-top-level.av-menu-button > a > .avia-menu-text  {
  gap: 3px 0;
}

#avia-menu .twoliners.menu-item-top-level > a > .avia-menu-text > span {
  line-height: 0px;
  text-align: center;
}

#avia-menu .twoliners.menu-item-top-level > a > .avia-menu-text > .secondline {
  color: #999;
  font-size: 1.1rem;
  font-style: italic;  
}

#top #wrap_all #avia-menu .twoliners.menu-item-top-level.av-menu-button-colored > a > .avia-menu-text > .secondline {
  color: #ddd;
}

Maybe you have to adjust some padding or gap value for your header height.
See here the test page: https://consulting.webers-testseite.de/

PS : you had to style the hamburger yourself f.e.

#av-burger-menu-ul * {
  border: none !important;
}

#av-burger-menu-ul > li {
  margin: 10px 0 !important;
}

#top #wrap_all #av-burger-menu-ul .twoliners.av-menu-button > a {
  padding-left: 10px ;
}

#av-burger-menu-ul .twoliners > a > .avia-menu-text {
  display:grid;
  height:100%;
  grid-template-columns:1fr;
  gap: 10px
}

#av-burger-menu-ul .twoliners > a > .avia-menu-text > span {
  justify-self:left;
  grid-column:1 / 2;
  align-self:center;
}

#av-burger-menu-ul .twoliners > a > .avia-menu-text > span.secondline{
  padding-left: 10px;
  color: #ddd;
  font-size: 1.1rem;
  font-style: italic;
}
/****  etc. ****/

yes – you can do that – or leave all as it is with buttons – and just remove the button styling on that:

body #people .avia-button {
  color: #000 !important;
  background-color: transparent;
  border-radius: none;
  padding: 0;
  font-size: 16px;
  border-bottom: none;
  text-align: left;
  background-color: transparent;
}

body #people .avia-button:before {
  content:"+ "
}

body #people .avia-button:active {
  outline: none;
  border: none;
}

hm – yes but this was meant for main-menu on left or right position.
but i think there will be now a better solution – just a moment …

put this in your child-theme functions.php:

add_shortcode('avia_search', 'get_search_form');

function avf_add_search( $items, $args ){
  if ($args->theme_location == 'avia'){
	  $search = '<li id="menu-item-search" class="menu-item menu-search menu-item-top-level">';
	  $search .= do_shortcode('[avia_search]');
	  $search .= '</li>';
    $items =  $items . $search;
  }
  return $items;
}
add_filter( 'wp_nav_menu_items', 'avf_add_search', 10, 2 );

and this to your child quick css:

.av-main-nav-wrap > ul:first-of-type {
  display: inline-flex !important;
  height: 100%;
}

#menu-item-search {
  line-height: 30px;
  position: relative;
}

#menu-item-search #searchform {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  line-height: 40px;
}

#top #searchform > div:first-of-type {
  position: relative;
  max-width: 200px;
  opacity: 1 !important;
  display: block !important;
}

#menu-item-search #searchform #s {
  padding: 10px 40px 10px 5px;
  font-size: initial;
  background-color: rgba(255,255,255,0.85);   /*** if you like to have transparency ***/ 
}

#top #searchform .ajax_search_response {
  background-color: rgba(255,255,255,0.85);
  position: absolute;
  top: 45px;
  padding: 10px 0;
  width: 100%;
}

/******* if you got  transparency option ******/
#header.header_color.av_header_transparency #avia-menu #menu-item-search #searchform #s {
  background-color: rgba(255,255,255,0.35);
  color: #FFF !important;
}
#header.header_color.av_header_transparency #avia-menu ::placeholder {
  color: #FFF !important;
}
/*** end of transparency header setting ***/

just put his code name it f.e. prg_patterns.php – therefore you had to start that codesnippet of him by a leading <?php
– and upload it to your child-theme/shortcodes folder.
if you haven’t allready this littel snippet in your child-theme functions.php – insert it :

function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

see doku to have own alb elements

see example in the footer area with links to impressum and datenschutz

https://enfold.webers-webdesign.de/impressum/#footer

i just edited his code a bit to have on form element classes to style the form output better:

/* form output */
ob_start();
?>
	<?php if( $atts['newtab'] == 'true' ): ?>
	<form class="prg newtab" method="POST" target="_blank">
	<?php else: ?>
	<form class="prg" method="POST">
	<?php endif; ?>
		<button class="noLink" type="submit" name="prgpattern" value="<?php echo $redirect_slug; ?>"><?php echo $atts['title']; ?></button>
	</form>
<?php
return ob_get_clean();

then i can set for those forms:

#top form.prg {
  display: inline-block;
  margin-bottom: 0;
}

#top form.prg .noLink {
  border: none;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
}

#top form.prg .noLink:hover {
  color: gold;
  cursor: pointer;
  transition: all 0.5s ease
}