navbar positioning elements

Hi,

in MDB you're using <links></links> to show content in navbar.

the problem is: using one <links> takes up entire width of navbar, two 50%, three 33%...

how do i achieve, that a <links> just take up the width of their children?

adding display: inline block to links component isn't working.

I want the search bar to take the maximum space in between.

Screenshot:

https://imgur.com/1wyzOcZ

as you can see, every <links> is 415,46px wide (burger button & heading left, searchbar middle, navigation links right)

if you shrink the view, you get following result:

https://imgur.com/SXkddNT

HTML:

<mdb-navbarSideClass="navbar navbar-expand-md fixed-top double-nav" [containerInside]="false">

<links>

<!-- SideNav slide-out button -->

<div>

<a (click)="sidenav.show()"class="button-collapse">

<i class="fa fa-bars"></i>

</a>

</div>

<logo>

<a class="navbar-brand ml-2 clearfix d-none d-md-inline-block font-weight-bold"style="font-size: 18px"href="#">Big Cloud Catalog</a>

</logo>

<!--/. SideNav slide-out button -->

</links>

<links>

<divclass="input-group navSearchbar">

<inputtype="text"placeholder=" Wonach suchen Sie?"class="noBorder"aria-describedby="basic-addon1">

<aclass="input-group-addon bg-yellow"id="basic-addon1">

<iclass="fa fa-search black-text"></i>

</a>

</div>

</links>

<links>

<ul class="nav navbar-nav nav-flex-icons ml-auto">

<li class="nav-item dropdown btn-group clearfix d-none d-md-inline-block"dropdown>

<adropdownToggletype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>

<i class="fa fa-globe"></i> DE

</a>

<div class="dropdown-menu dropdown-primary dropdown-menu-right"role="menu">

<a class="dropdown-item"href="#">Deutsch - DE</a>

<a class="dropdown-item"href="#">English - EN</a>

<a class="dropdown-item"href="#">Français - FR</a>

<a class="dropdown-item"href="#">Italiano - IT</a>

</div>

</li>

<li class="nav-item clearfix d-none d-md-inline-block">

<a class="nav-link waves-light"mdbRippleRadius>

<i class="fa fa-user-circle-o"></i>

<span class="clearfix d-none d-sm-inline-block">Mein Konto</span>

</a>

</li>

<li class="nav-item dropdown btn-group clearfix d-none d-md-inline-block"dropdown>

<a dropdownToggletype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>

<i class="fa fa-list"></i>

<span class="clearfix d-none d-sm-inline-block">Listen</span>

</a>

<div class="dropdown-menu dropdown-primary dropdown-menu-right"role="menu">

<a class="dropdown-item"href="#">Liste 1</a>

<a class="dropdown-item"href="#">Liste 2</a>

</div>

</li>

<li class="nav-item">

<a class="nav-link waves-light"mdbRippleRadius>

<i class="fa fa-shopping-cart"></i>

<span class="badge red">5</span>

</a>

</li>

</ul>

</links>

</mdb-navbar>

<!--/. Navbar -->