How do I align a text on the same line as a button?

I have a text and next to it is a button. I would like the text and the button to be aligned on the same line, including the button’s border-bottom.

.cta {
  padding: 100px 0;
}

.cta-content {
  background-color: #3882f6;
  border-radius: 10px;
  color: #f9faf8;
  padding: 50px 100px;
}

.cta-title {
  font-weight: bold;
}

.flex-group {
  display: flex;
}

.cta-btn {
  color: inherit;
  background-color: inherit;
  border: 2px solid currentColor;
  padding: 8px 40px;
  border-radius: 5px;
  font-weight: bold;
}

  <div class="cta">
        <div class="cta-content">
          <h3 class="cta-title">Call to action! It's time!</h3>
          <div class="flex-group">
            <p class="cta-text">
              Sign up for our product by clicking that button right over there!
            </p>
            <button class="cta-btn">Sign up</button>
          </div>
        </div>
    </div>

I tried different approaches but I never managed to align it correctly (align-items: baseline for example). If there’s a solution using flexbox I would gladly take it.

>Solution :

Two things:

1. Remove the default margin from the p element.
2. Set the flex container to align-items: flex-end.

Make these adjustments to your code:

.flex-group {
  display: flex;
  align-items: flex-end; /* new */
}

.cta-text {
  margin-bottom: 0;  /* new */
}

.flex-group {
  display: flex;
  align-items: flex-end; /* new */
}

.cta-text {
  margin-bottom: 0;  /* new */
}

.cta {
  padding: 100px 0;
}

.cta-content {
  background-color: #3882f6;
  border-radius: 10px;
  color: #f9faf8;
  padding: 50px 100px;
}

.cta-title {
  font-weight: bold;
}

.cta-btn {
  color: inherit;
  background-color: inherit;
  border: 2px solid currentColor;
  padding: 8px 40px;
  border-radius: 5px;
  font-weight: bold;
}

<div class="cta">
  <div class="cta-content">
    <h3 class="cta-title">Call to action! It's time!</h3>
    <div class="flex-group">
      <p class="cta-text">
        Sign up for our product by clicking that button right over there!
      </p>
      <button class="cta-btn">Sign up</button>
    </div>
  </div>
</div>

Notes:

• align-items: baseline won’t work because it aligns the text not the elements. align-items: flex-end, however, will align the elements at the bottom.

• p elements normally come with 1em top and bottom margins, set by the browser.