title: How can I have two objects aligned horizontally (one to the right of the other) and center the left one?
body: <p>I have a form which looks like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;form action="/my-handling-form-page" method="post"&gt;
        &lt;div class="form-group"&gt;
          &lt;input type="text" name="query"/&gt;
          &lt;button type="submit"&gt;Search&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I want the input to be horizontally centered in the page and then I would like the button to be aligned with it horizontally and placed to the right of the input element. How do I do this?</p>
  
  <p>I have tried making them both display: inline-block and centering the input but I can't get it to work.</p>
  
  <p>Also I am using bootstrap if that helps/doesn't. 
  <a href="https://jsfiddle.net/k6bot5mu/1/" rel="nofollow">Here</a> is a fiddle of the whole thing</p>