I'm sure this is something simple but i'm exhausted trying to figure it out. I've tried a lot of different variations and I just can't get the search button to sit on the same line as the search bar. I'm at my wits end. Why are they on two different lines???

```css
.container-inner {
    width: 100%;
    position: relative;
    display: flex;
}

#search-bar {
    width: 90%;
    border: 2px solid #fff200;
    border-right: none;
    padding: 5px;
    height: 40px;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #9DBFAF;
}

#search-bar:focus{
    color: black;
}

.searchButton {
    width: 40px;
    height: 36px;
    border: 2px solid #fff200;
    background: grey;
    text-align: center;
    color: black;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 20px;
}

.searchButton:hover{
    background: darkslategrey
}

.container {
    width: 50%;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}
```

```html
<div class="container">
    <div class="container-inner">
    <form id="search-form">
        <div class="input-group input-group-lg">
            <input id="search-bar" class="form-control search-bar" placeholder="Search for a song...">
            <button type="submit" class="searchButton">
            <i class="fa fa-search"  aria-hidden="true"></i>
        </div>
    </div>
    </form>
</div>
```