Placing button under another div - html

Question

This is probably very simple but I've been unable to figure it out. All I want to do is place the button underneath the input rows.
This is what I have attempted so far:
#subscribe button {
border: 0;
margin-top: 10px;
margin-left: 10px;
padding: 9px 27px;
cursor: pointer;
background: #f82249;
color: #fff;
transition: all 0.3s ease;
outline: none;
font-size: 14px;
border-radius: 50px;
position: relative;
}
<form method="POST" action="#">
<div class="form-row justify-content-center">
<div class="col-auto">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<div class="col-auto">
<input type="text" class="form-control" placeholder="A website I want to use Cobble on is:">
</div>
<div class="col-auto">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
and this is what the end result always is:
Any help would be immensely appreciated. Thank you.

Answer 1

You have all three form elements inside this div:
<div class="form-row justify-content-center">
Make another div just like that one and move the button inside it. In fact, it looks like you want each of those elements in its own "form-row" div. The only reason the two text inputs are on different lines is because they take up the whole row and they're wrapping.