The original answer suggested using inline-block and float to position the elements, but things have moved on since then. A more flexible solution today would be to use flex.
#main {
border: 1px dotted black;
display: flex;
align-items: center; /* Vertical align the elements to the center */
}
h1 {
margin: 0;
}
button {
margin-left: auto; /* Push this element to the right */
}<div id="main">
<h1>Title</h1> <button>Button</button>
</div>Old answer
Give your h1 display: inline-block to allow your elements to occupy the same row…
#main {
width: 200px;
border: 1px dotted black;
}
h1 {
margin: 0;
display: inline-block;
}
button {
float: right;
}<div id="main">
<h1>Title</h1> <button>Button</button>
</div>