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 `FlexBox` like this:([here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) you can read more about `FlexBox`)

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

```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>
```