The button and heading inside the same div are in different rows-CodePudding

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

<div >
  <h1 >Book your first adventure with us at 10% discount</h1>
  <button >Book now</button>
</div>

CodePudding user response：

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;
}

CodePudding user response：

You can use FlexBox like this:(here you can read more about FlexBox)

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

<div >
  <h1 >Book your first adventure with us at 10% discount</h1>
  <button >Book now</button>
</div>

CodePudding user response：

You can use grid display: grid; and add styling to button a little.

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

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

<div >
  <h1 >Book your first adventure with us at 10% discount</h1>
  <button >Book now</button>
</div>