Bootstrap 4 columns align issue - html

Question

I'm working on making a site, and im currently dealing with BS4.1.3
I'm still new to this world so i have this issue right now:
<div class="container">
<nav class="navbar sticky-top">
<div class="grid">
<div class="row">
<div class="col-md-4">
<a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
<img src="img/baseline-menu-24px.svg">
</a>
</div>
<div class="col-md-4">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="40" height="40">
</a>
</div>
<div class="col-md-4">
Test
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="collapse" id="collapse-top-menu">
<input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
</div>
</div>
</div>
</div>
</nav>
</div>
But the end result it's like this
While i wanted that the first blue button and the "logo" (B) were aligned, "test" a lot more in the right part of the navbar
Also the bottom search bar should be the same width as the container, so full lenght

Answer 1

<div class="container">
<nav class="navbar sticky-top">
<div class="grid">
<div class="row">
<div class="col-md-4">
<a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
<img src="img/baseline-menu-24px.svg">
</a>
</div>
<div class="col-md-8 pull-right">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="40" height="40">
<span>Test</span>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="collapse" id="collapse-top-menu">
<input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
</div>
</div>
</div>
</div>
</nav>
</div>
.collapse input{
width:100%;
}

Answer 2

I am on mobile Stack Overflow app hence not able to test this.
In Bootstap 4, to put the test at the right of the navbar you can try,
<ul class="navbar-nav ml-auto">The content which goes to right comes here as a li</ul>
Also for aligning the blue button (The button you are using here is called as hamburger, remember that) can be aligned by using some margin-top for it.
Just use a CSS selector to select the hamburger and give some margin-top property to it.
Please consider adding a codepen so that we mobile users can play around with your code.