title: How to Center and Right-align on a row with CSS Flex only
body: <p>Tried many variations like this, but could not get it to work. Here is the last attempt:</p>
  
  <pre><code>.parent {
    display: flex;
    //justify-content: center;
    width: 600px;
    background-color: yellow
  }
  .c {
    //flex: 1 1 0;
    //text-align: end;
    margin-left: auto;
    margin-right: auto;
    background-color: cyan;
  }  
  .e {
    //flex: 1 1 0;
    // text-align: end;
    background-color: grey;
  }  
  .bs {
    background-color: green;
    color: white;
    width: 70px;
  }
  </code></pre>
  
  <p>with html:</p>
  
  <pre><code>&lt;div class="parent"&gt;
    &lt;div class="c"&gt;
      &lt;button class="bs"&gt;OK&lt;/button&gt;
      &lt;button class="bs"&gt;Cancel&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="e"&gt;
      &lt;button class="bs"&gt;Help&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I know how to solve this by placing a 'visibility: hidden' button on the left-hand side and use justify-content with space-between, but I want to learn/know how to do it using CSS only.</p>
  
  <p>Would be grateful for advice.</p>