I'm struggling to position this button next to the paragraph element instead of below it. I want them both on the same line.
<div class="up">
<div class="ban">
<div class="act">
<h2>Join The Action</h2>
<p>Sign up for our product by clicking that button right over there!</p>
<button>Join Up</button>
</div>
</div>
</div>
I attempted changing the flex-direction to row, but this resulted in all three elements being placed on the same line, rather than having the header above the paragraph and the button on the same line as the paragraph.
.up {
display: flex;
justify-content: center;
height: 19vh;
align-items: center;
}
.ban {
width: 1150px;
height: 250px;
border-radius: 25px;
background-color: red;
color: white;
}
.act {
display: flex;
flex-direction: column;
align-items:flex-start;
font-size: 25px;
padding: 50px 50px;
}
.act p {
padding: 10px 0;
}
.act button {
display: inline-block;
padding: 15px 30px;
background-color: red;
border: 2px solid white;
color: white;
font-weight: 700;
text-transform: uppercase;
border-radius: 10px;
font-size: 18px;
margin-top: 10px;
}