title: Keeping position of the wrapping blocks
body: <p>I have an upper block with a content wrapper, and a bottom block, which consists of two equal blocks also with content wrappers inside. </p>
  
  <p><a href="https://plnkr.co/edit/DTar7Wy5e37HnqbU2Gud?p=preview" rel="nofollow">https://plnkr.co/edit/DTar7Wy5e37HnqbU2Gud?p=preview</a></p>
  
  <pre><code>&lt;div class="upper"&gt;
    &lt;div class="wrap"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="bottom"&gt;
    &lt;div class="left"&gt;
      &lt;div class="left-wrap"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="right"&gt;
      &lt;div class="right-wrap"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Wrapper blocks have a dotted border.</p>
  
  <p>No matter how big or small screen is, the smaller bottom wrap blocks together will be always the same size and position as upper bigger one, because smaller blocks have 150px max-width, which is half of the upper wrapper block max-width.</p>
  
  <p>But when you change the width of the bottom composing blocks from 50% to 40% and 60%, position of the smaller wrapper blocks is also changing. </p>
  
  <p><a href="https://plnkr.co/edit/FTmHxm2F3vD8LhF5DM0d?p=preview" rel="nofollow">https://plnkr.co/edit/FTmHxm2F3vD8LhF5DM0d?p=preview</a></p>
  
  <p>You can change their max-width to some other numbers (99 and 201 in my example), but it seems impossible to make them always keep the same position as the upper wrap.</p>
  
  <p>So, is there any way to make these wrappers from the second example act like in the first example with 50%?</p>