Add form to new line in navbar - html

Question

I am using this code for following things
->add search form to new line in sm or smaller screen sizes
->float right the toggle button in sm or smaller screen sizes
The main issue is that the text input is not expanding when size is changin in the small screen it keep a constant max size of 13rem.
and how to make the toggle button right aligned.
note: float-right is not working
<nav class="navbar navbar-expand-sm justify-content-between navbar-light bg-light d-flex flex-row">
<a class="navbar-brand" href="{{route('homepage')}}">ODekh</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<form method="get" action="{{route('product.search')}}" id="nav-form" class="form-inline">
<div class="input-group mb-3">
<input class="form-control" type="search" placeholder="Search" aria-label="Search" id="search" placeholder="Search Books, Authors" name="search" value="">
<div class="input-group-append border-0 bg-white">
<button class="btn btn-outline-secondary" type="submit"><span class="fa fa-search"></span></button>
</div>
</div>
</form>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="">Books</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Cart</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Login</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="">My Account</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="">Logout</a>
</div>
</li>
</ul>

Answer 1

Below is the fix for your toggle button alignment. It's not entirely clear what you want with the search input though. You want it to expand on smaller screens?? Do you really mean expand and not shrink? (expanding on smaller screens doesn't make any sense to me)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-sm justify-content-between navbar-light bg-light">
<a class="navbar-brand" href="{{route('homepage')}}">ODekh</a>
<form method="get" action="{{route('product.search')}}" id="nav-form" class="form-inline order-sm-12">
<div class="input-group mb-0">
<input class="form-control" type="search" placeholder="Search" aria-label="Search" id="search" placeholder="Search Books, Authors" name="search" value="">
<div class="input-group-append border-0 bg-white">
<button class="btn btn-outline-secondary" type="submit"><span class="fa fa-search"></span></button>
</div>
</div>
</form>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="">Books</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Cart</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Login</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="">My Account</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>