title: Align max-width aligned right with max-width margin auto in css
body: <p>I am trying to achieve the following align effect between divs.</p>
  <p><a href="https://i.stack.imgur.com/CoGDc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CoGDc.png" alt="enter image description here" /></a></p>
  <p>The blue box has to occupy the same width as the red boxes, but also the auto margin-right.
  This way, if the screen is resized reds and blues will be always aligned.</p>
  <p>Is there any way to achieve that in CSS?</p>
  <p>I tried to apply margin-left on the blue, also display a grid with grid-template-column: auto 1fr auto; but seems like it is not working because I can't get the auto margin.</p>
  <p>I am adding a codepen to help people to see the problem and test.</p>
  <p><a href="https://codepen.io/Raikish/pen/BaWoexV" rel="nofollow noreferrer">https://codepen.io/Raikish/pen/BaWoexV</a></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;centered red&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;centered red&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;right blue&quot;&gt;&lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.centered {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .right {
    margin-left: auto;
    max-width: 1000px
  }
  
  div {
    margin-bottom: 10px;
    height : 200px;
  }
  
  .red {
    background-color: red;
  }
  
  .blue {
    background-color: blue;
  }
  </code></pre>