I want to create a navbar with some links on the left and a button on the right

```css
#navbar {
  padding: 20px;
  border: 1px solid #000000;
}

#btn {
  padding: 6px 16px;
  float: right;
}
```

```html
<div id="navbar">
  <a>link 1</a>
  <a>link 2</a>
  <button id="btn">button 1</button>
</div>
```

As you can see the button is not centered vertically. I tried to fix it using this code

```css
#navbar {
  overflow: hidden;
  padding: 20px;
  border: 1px solid #000000;
}

.navbarElement {
  padding: 6px 16px;
}

#navbar a {
  float: left;
}

#buttonBar {
  float: right;
}
```

```html
<div id="navbar">
  <a class="navbarElement">link 1</a>
  <a class="navbarElement">link 2</a>
  <div id="buttonBar">
    <button class="navbarElement">button 1</button>
  </div>
</div>
```

I think this solution is bad because I have to set a padding for the links too. I also think that there might be smarter solutions instead of using `float`?

I don't want to add many DOM elements to achieve the desired behaviour if possible.