Bootstrap 4 | Can't keep a search box on the same line with a custom navbar's items

I made a custom navbar using Bootstrap 4's grid. This navbar is split into two parts: left part contains navbar items and right part contains a search box. The problem is that the search box doesn't stay in the right part of my navbar no matter what. It always goes under the navbar items (left part).

Here is my HTML & CSS code:

.custom-navbar-buttons p {
  display: inline;
  color: black;
  margin-right: 0.4rem;
}

.custom-navbar-buttons {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

<body>
  <div class="container">
    <div class="row">
      <div class="custom-navbar col-12 bg-success">
        <div class="custom-navbar-buttons col-8">
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
        </div>
        <div class="custom-navbar-search col-4">
          <input type="text" name="search" placeholder="search this site">
        </div>
      </div>
    </div>
  </div>
</body>

How do I properly position a search box on the same line with navbar's items?

P.S.: There are no tags around the "input" because I tried with them and without them, both ways didn't work so I didn't change code since the last try.

P.P.S.: I've searched Google and Stackoverflow before posting my own question. None of the suggested answers there were of help to me. Most of people suggest that the navbar has too many items and so it can't fit the search box, moving it on the next line instead, but I think that's silly because I've tried it even with only 2 items in my navbar.

Solution

Is this what you want?

If you want to have the searchbar pulled to the right, add:

class="float-right"

.custom-navbar-buttons p {
  display: inline;
  color: black;
  margin-right: 0.4rem;
}

.custom-navbar-buttons {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

<body>
  <div class="container">
    <div class="row">
      <div class="custom-navbar col-12 bg-success">
        <div class="custom-navbar-buttons col-8">
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
        
          <input type="text" name="search" placeholder="search this site">
        </div>
      </div>
    </div>
  </div>
</body>