How to inline elements with CSS

Problem :

I'm trying to make menubar at the top of my website. It should looke like this:

The red square is my button.

My problem is that my headline and my button are not in the same line. So I tried to use a table but then there are both aligned to the left. After that I used float: right; for my button. It is now aligned right but in the next line.

How can I fix it so my button and my headline are in the same line and aligned like my picture.

HTML:

<div id="topbar">
   <h1>Fahrplan</h1>
   <button type="button" id="settings"></button>
</div>

CSS:

h1 {
  height: 44px;
  margin: 0;
  color:#FFFFFF;
  text-align: center;
  font-family: Helvetica, sans-serif;
  font-size: 16px; 
  line-height: 44px;
}
#topbar button {
  height: 20px;
  width: 20px;
  float: right;
}

Solution :

For this kind of scenarios, you might consider using positions.

#topbar {
  position: relative;
}

h1 {
  margin: 0;
  color:#FFFFFF;
  text-align: center;
  font-family: Helvetica, sans-serif;
  font-size: 16px; 
  line-height: 44px;
  background: #99f;
}
#topbar button {
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -10px;
}

<div id="topbar">
  <h1>Fahrplan</h1>
  <button type="button" id="settings"></button>
</div>

Here I have given position to both #topbar and the button. The #topbar has a relative position and button has an absolute position:

#topbar {
  position: relative;
}
button {
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -10px;
}

And I have also adjusted the button to be vertically centred by using the negative margin of half the height. Hope this helps.