title: Align two divs to the center and end of a parent div, respectively?
body: <p>I have 2 divs within a parent div. The first child div needs to be centered in the parent, while the second child div needs to be at the right end, within the parent. Both children need to be on the same line. The left end of the parent needs to be empty.</p>
  
  <p>I have already tried using flex with the parent, as well as inline-block and text-align on the children. Floating the children doesn't appear to work either.</p>
  
  <p><a href="http://jsfiddle.net/axhotn45/" rel="nofollow noreferrer">Here</a> is a link to my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
    border: 2px solid black;
    width: 100%;
  }
      
  .center {
    display: inline-block;
  }
      
  .right {
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
    &lt;div class="center"&gt;
      &lt;div&gt;A&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="right"&gt;
      &lt;div&gt;D&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The 'A' character needs to be in the center of the black box, while the 'D' needs to be at the very right side, within the black box.</p>