Bootstrap 4 – navbar search form min width - css

Question

How to make 100% width search form with min-width in Bootstrap 4 navbar?
My markup here: https://jsfiddle.net/bfsrjo23/
<nav class="navbar navbar-expand-md navbar-light bg-faded">
Brand
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar5">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">LongLink1 <span class="sr-only">Home</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="#">LongLink2</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink3</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink4</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink5</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink6</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink7</a></li>
</ul>
</div>
<form class="w-100 py-2">
<input type="text" class="form-control border" placeholder="Search...">
</form>
I put form outside collapse to make it always visible (laptop in 1st line, mobile in 2nd line). It's work fine exept Tablet mode (Viewport width around 880px), the search box too short. I want to add "min-width" and let form go in second line if size not pass.

Answer 1

Use css like this:
#yourformId > .input-group {
display: inline;
}

Answer 2

Just add class d-inline in nav, like this:
<nav class="navbar navbar-expand-md navbar-light d-inline bg-faded">
Brand
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar5">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">LongLink1 <span class="sr-only">Home</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="#">LongLink2</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink3</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink4</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink5</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink6</a></li>
<li class="nav-item"><a class="nav-link" href="#">LongLink7</a></li>
</ul>
</div>
<form class="w-100 py-2">
<input type="text" class="form-control border" placeholder="Search...">
</form>

Answer 3

Found acceptable solution - key is remove flex-wrap:wrap from css, for example with #media(min-width:992px), search form must have "display:flex;flex-basis:100%" or "width:100%". This will move search in second line.