How to get submit form button to be on the next line css?

I have a simple form in the React with two inputs and a submit button. I would like the button centralised below the two inputs but can’t get this working at all. Could someone please help?

HTML

.SearchBar-fields {
  display: flex;
  justify-content: center;
  margin-bottom: 2.88rem;
  flex-direction: row;
  flex-wrap: wrap;
}

.SearchBar-fields input {
  width: 21rem;
  padding: .66rem 1rem;
  margin-right: 2.22rem;
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: .77rem;
  font-weight: 500;
  align-self: stretch;
}

.SearchBar-fields input:last-child {
  margin-right: 0;
}


.SearchBar-submit button {
  border-radius: 4px;
  padding: .72rem 1.7rem;
  background-color: #cca353;
  color: #ffffff;
  font-weight: 600;
  transition: background-color .5s;
  border-radius: 20px;
  flex-direction: column;
  min-width: 100%;
}
<form className="SearchBar-fields" onSubmit = {handleSearch}>
    <input placeholder="Search Businesses" onChange = {handleTermChange} required/>
    <input placeholder="Where?" onChange = {hanldeLocationChange} required />
    <div className="SearchBar-submit">
        <button >Let's Go</button>
    </div>
</form>

Answer

UPDATE TWO WAYS TO DO THIS:

Main problem that you are facing is because of form element, which takes the full width of the container being the block-level element.

1. Use extra wrapper div around your inputs and set display:flex; on your wrapper.

.SearchBar-fields{
  display: inline-flex;
}

.SearchBar-fields input {
  width: 21rem;
  padding: .66rem 1rem;
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: .77rem;
  font-weight: 500;
}

.SearchBar-submit {
  text-align:center;
}
.SearchBar-submit button {
  border-radius: 4px;
  padding: .72rem 1.7rem;
  background-color: #cca353;
  color: #ffffff;
  font-weight: 600;
  transition: background-color .5s;
  border-radius: 20px;
  margin-top:1rem;
}
<form class="SearchBar-fields" onSubmit = {handleSearch}>
    <div class="inner-wrapper">
     <input placeholder="Search Businesses" onChange = {handleTermChange} required/>
     <input placeholder="Where?" onChange = {hanldeLocationChange} required />
     <div>
    <div class="SearchBar-submit">
        <button >Let's Go</button>
    </div>
</form>

I have fixed this issue by using display:flex; on form and using a wrapper around inputs.

2. Second method:

Try making your .SearchBar-fields form as display:inline-block, so that the form grows input widths long only.

And after that you have .SearchBar-submit div, which contains your button, you can simply use text-align:center, on the div and button will move to center. There are many other ways, also but this is simple and straight forward.

form.SearchBar-fields {
  margin-bottom: 2.88rem;
}

.SearchBar-fields input {
  width: 21rem;
  padding: .66rem 1rem;
  margin-right: 2.22rem;
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: .77rem;
  font-weight: 500;
  align-self: stretch;
}

.SearchBar-fields input:last-child {
  margin-right: 0;
}


.SearchBar-submit {
  border-radius: 4px;
  padding: .72rem 1.7rem;
  background-color: #cca353;
  color: #ffffff;
  font-weight: 600;
  transition: background-color .5s;
  border-radius: 20px;
}
<form className="SearchBar-fields" onSubmit = {handleSearch} style="display:inline-block">
<input placeholder="Search Businesses" onChange = {handleTermChange} required/>
<input placeholder="Where?" onChange = {hanldeLocationChange} required />
<div className="SearchBar-submit" style="text-align:center">
    <button >Let's Go</button>
</div>
</form>