title: Horizontal alignment of inline elements improvement
body: <p>On my page I have two elements in a header area. I would like the first element to be centered in the middle of the header area and a second element that is pushed all the way to the right side of the header area. I achieved the desired effect using this code: </p>
  
  <pre><code>&lt;div id="header-area" style="text-align:center;width:100%;"&gt;
    &lt;div id="partition1" style="display:inline-block;width:33%;"&gt;&lt;/div&gt;
    &lt;div id="partition2" style="display:inline-block;width:33%;"&gt;
      &lt;div id="element1" style="display:inline;width:400px;height:100px;"&gt;
        &lt;h3 style="display:inline;width:400px;"&gt;Main title Goes Here&lt;/h3&gt;&lt;br/&gt;&lt;br/&gt;
        &lt;p style="display:inline;width:400px;"&gt;Subtitle goes here&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="partition3" style="display:inline-block;width:33%;text-align:right;"&gt;
      &lt;div id="Element2" style="display:inline;width:150px;vertical-align:middle;"&gt;
        &lt;button onclick="history.back();" style="height:45px;width:100px;"&gt;
        Back&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You will notice I partitioned the <code>header-area</code> into three spaces and aligned the <code>element1</code> &amp; <code>element2</code> within their respective partitions. How can I achieve the same layout without partitioning the <code>header-area</code>?</p>