title: How to make an input group fill the horizontal space?
body: <p>I am using bootstrap 4, and I have a navbar for small screens, where I would like a search input group to take the width from left all the way to the right, where I have the menu bar icon. I have made a <a href="https://jsfiddle.net/uLp0yqw9/25/" rel="nofollow noreferrer">JSFiddle</a> here. How can I make the input group be flexible and take the remaining space that is on the left side after the menu bar?</p>
  
  <p>I can't seem to get the input inside the input group to take the full width of the form wrapper, I have tried with setting the <code>margin-right</code> same width as the <code>menu-bar</code> but that didn't work since, the input inside the input group  didn't take the full width. How can I achieve the desired layout?</p>
  
  <p>This is the navbar:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media (max-width: 767px) {
    .navigation-container .form-wrapper {
      width: 100%;
      margin-right: 32px;
    }
    .navigation-container .menu-button {
      position: absolute;
    }
    .navigation-container .navbar {
      height: 50px;
    }
  }
  .navigation-container .nav-link {
    padding: 0;
  }
  .navigation-container .navbar {
    background: #fff;
    flex-direction: inherit;
    align-items: center;
    padding: 0;
  }
  .navigation-container .navbar .btn {
    font-size: 14px;
  }
  .navigation-container .navbar .right-side-bar #nav-icon1 {
    width: 22px;
    top: 10px;
    right: 10px;
    cursor: pointer;
    padding: 0.85rem;
  }
  .navigation-container .navbar .right-side-bar #nav-icon1 span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #008489;
    border-radius: 8px;
    opacity: 1;
    left: 0;
  }
  .navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(1) {
    top: 0.3rem;
  }
  .navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(2) {
    top: 0.8rem;
  }
  .navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(3) {
    top: 1.3rem;
  }
  .navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(1) {
    top: 0.8rem;
    background: #008489;
  }
  .navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }
  .navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(3) {
    top: 0.8rem;
    background: #008489;
  }
  .navigation-container input {
    border: 0;
  }
  .navigation-container i {
    color: #008489;
    font-size: 28px;
  }
  .navigation-container .input-group-addon {
    background: #fff;
    border: 0;
    padding: 0;
    border-radius: 0;
  }
  
  .search-button {
    background: transparent;
    border: 0;
  }
  .search-button i {
    font-size: 22px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/&gt;
  &lt;div class="navigation-container"&gt;
    &lt;div class="container top-menu"&gt;
      &lt;nav class="navbar navbar-light bg-faded"&gt;
          &lt;div class="hidden-md-up nav-small"&gt;
            &lt;div class="form-wrapper"&gt;
              &lt;form action="/search" method="get"&gt;
                &lt;div class="input-group"&gt;
                  &lt;span class="input-group-addon"&gt;
                    &lt;button type="submit" class="search-button"&gt;
                      &lt;i class="ion-ios-search-strong"&gt;&lt;/i&gt;
                    &lt;/button&gt;
                  &lt;/span&gt;
                  &lt;input type="text" name="q" class="search-input form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1"&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
            &lt;div class="right-side-bar"&gt;
              &lt;div id="nav-icon1" class="menu-button hidden-md-up"&gt;
                &lt;span&gt;&lt;/span&gt;
                &lt;span&gt;&lt;/span&gt;
                &lt;span&gt;&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="navbar-collapse collapse justify-content-between" id="navbar5"&gt;
              &lt;form action="/search" method="get" class="my-auto d-inline mx-auto col-md-8" role="search"&gt;
                  &lt;div class="input-group big-screen-search-form"&gt;
                    &lt;span class="input-group-addon" id="basic-addon1"&gt;
                      &lt;button type="submit" class="search-button"&gt;
                        &lt;i class="ion-ios-search-strong"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                    &lt;/span&gt;
                    &lt;input type="text" id="search-input" name="q" class="search-input form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1"&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
              &lt;ul class="navbar-nav my-auto"&gt;
                  &lt;li class="nav-item dropdown"&gt;
                      &lt;a class="nav-link" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                          &lt;i class="ion-ios-gear-outline"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                      &lt;div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Admin dashboard&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;
                              Log out
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;     
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>