How to align ReactJS's <button/> and <input/> in same row/horizontally?

Question

I have <button/> and <input/> inside a container. How can I get them to align in the same row and in the middle of the container vertically (<div className="container">)?

This is what I have so far:

<div className="container">
   <div>
     <input className="form-control" placeholder='Enter Email'/>
   </div>
   <div>
     <button type="submit" className="btn"> Register </button>
   </div>
</div>

With className="container":

.container {
  width: 80%;
  margin: 0 auto;
  padding: 0 137px;
}

EDIT

I tried what you suggested with the following but the <input/> and <button/> is still on top of each other:

The top black portion is a navigation bar and I want to align everything inside the bar horizontally, next to each other from left to right.

       <div className="container">
          <h1>
            TESTING
          </h1>
          <input
            className="form-control"
            id="input-field"
            placeholder='Enter Email'
          />
          <button
            type="submit"
            className="btn"
          >
            Register
          </button>
      </div>

Answer 1

You can use flex-box for this. Swap out the class attribute for className in react

edit: To answer your edited question:

• align everything horizontally with align-items: center on the flex container
• Ensure the input and button don't break into separate lines by wrapping them together in a container element.

h1 { color: white; }

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222;
}

.email-holder {
  margin-left: 10px;
}

<div class="container">
  <h1>TESTING</h1>
  <div class="email-holder">
    <input class="form-control" placeholder='Enter Email'/>
    <button type="submit" class="btn"> Register </button>
  <div/>  
</div>