Question: What should be the css to align them in the same line?

```
<div class="discount-tab">
  <h1 class="discount-heading">Book your first adventure with us at 10% discount</h1>
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Book now</button>
</div>

```

Answer: 
You can set the `h1` tag to: `display: inline-block`. It'll only take up the space it needs that way.

Another approach, which might be even better is to make use of flexbox.
Flexbox can align all the items vertically and/or horizontally.

```
.discount-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
}

```
You can use [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) `display: grid;` and add styling to button a little.

```css
.discount-tab {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 4fr 1fr;
}

.mdl-button {
  max-width: 100px;
}
```

```html
<div class="discount-tab">
  <h1 class="discount-heading">Book your first adventure with us at 10% discount</h1>
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Book now</button>
</div>
```