Using a flexbox, how can I align one element on the far left, one on the far right and another below the far right one?

Question

Here is my code:

.region-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="region region-footer">

  <nav role="navigation" aria-labelledby="block-mytheme-footer-menu" id="block-mytheme-footer" class="contextual-region">

    <ul class="menu menu--footer nav">
      <li<a href="/about" data-drupal-link-system-path="node/2">About</a>
        </li>
        <li><a href="/contact" data-drupal-link-system-path="contact">Contact</a></li>
        <li> <a href="/privacy-policy" data-drupal-link-system-path="node/6">Privacy Policy</a></li>

    </ul>
  </nav>

  <section data-quickedit-entity-id="block_content/16" id="block-socialmedia" class="contextual-region block block-block-content block-block-content3e0c4d11-72cf-4565-ae42-0da66a2df37d clearfix" data-quickedit-entity-instance-id="0">

    <div data-quickedit-field-id="block_content/16/body/en/full" class="field field--name-body field--type-text-with-summary field--label-hidden field--item quickedit-field">
      <div class="social-media">
        <a class="social-a" href="https://twitter.com/">
          <img src="/themes/img/twitter.png">
        </a>
        <a class="social-a" href="https://www.instagram.com/">
          <img src="/themes/img/instagram.png">
        </a>
        <a class="social-a" href="https://dribbble.com/">
          <img src="/themes/img/dribbble.png">
        </a>
      </div>
    </div>
  </section>


  <section data-quickedit-entity-id="block_content/14" id="block-copyright" class="contextual-region block block-block-content block-block-contentd9975090-e973-43a8-bd2d-ec3a21f65f51 clearfix" data-quickedit-entity-instance-id="0">

    <div data-quickedit-field-id="block_content/14/body/en/full" class="field field--name-body field--type-text-with-summary field--label-hidden field--item quickedit-field">
      <div class="copyright">
        <p>© MySite 2019</p>
      </div>
    </div>
  </section>

</div>

Here is what my website looks like and what I'm trying to achieve: https://i.sstatic.net/wwpIb.jpg

I've tried experimenting with align-self on each item, setting the copyright to margin-right: auto, setting each element to width: 50% etc. but nothing is working

Answer 1

Flexbox Solution

Here is a simple example. Both items on the first row take up 50% of space. The last item is pushed to the far right using margin-left: auto.

.container {
  display: flex;
  flex-wrap: wrap;
}

.one, .two {
  flex-basis: 50%;
}

.two {
  text-align: right;
}

.three {
  margin-left: auto;
}

<div class="container">
  <div class="one">
    one
  </div>
  <div class="two">
    two
  </div>
  <div class="three">
    three
  </div>  
</div>

jsFiddle

Grid Solution

There are many ways to handle this using Grid—I just picked this one because I like grid-template-areas. Note: the dot (.) in Grid represents an empty grid area.

.container {
  display: grid;
  grid-template-areas: "one two"
                       ". three";
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.two, .three {
  text-align: right;
}

<div class="container">
  <div class="one">
    one
  </div>
  <div class="two">
    two
  </div>
  <div class="three">
    three
  </div>  
</div>

jsFiddle

Answer 2

You can wrap two section elements within div element

<div class="region region-footer">

    <nav role="navigation" aria-labelledby="block-mytheme-footer-menu" id="block-mytheme-footer" class="contextual-region">

        <ul class="menu menu--footer nav">
            <li><a href="/about" data-drupal-link-system-path="node/2">About</a></li>
            <li><a href="/contact" data-drupal-link-system-path="contact">Contact</a></li>
            <li>
                <a href="/privacy-policy" data-drupal-link-system-path="node/6">Privacy Policy</a>
            </li>

        </ul>
    </nav>

    <div class="right-content">
        <section data-quickedit-entity-id="block_content/16" id="block-socialmedia" class="contextual-region block block-block-content block-block-content3e0c4d11-72cf-4565-ae42-0da66a2df37d clearfix" data-quickedit-entity-instance-id="0">

            <div data-quickedit-field-id="block_content/16/body/en/full" class="field field--name-body field--type-text-with-summary field--label-hidden field--item quickedit-field">
                <div class="social-media">
                    <a class="social-a" href="https://twitter.com/">
                        <img src="/themes/img/twitter.png">
                    </a>
                    <a class="social-a" href="https://www.instagram.com/">
                        <img src="/themes/img/instagram.png">
                    </a>
                    <a class="social-a" href="https://dribbble.com/">
                        <img src="/themes/img/dribbble.png">
                    </a>
                </div>
            </div>
        </section>


        <section data-quickedit-entity-id="block_content/14" id="block-copyright" class="contextual-region block block-block-content block-block-contentd9975090-e973-43a8-bd2d-ec3a21f65f51 clearfix" data-quickedit-entity-instance-id="0">

            <div data-quickedit-field-id="block_content/14/body/en/full" class="field field--name-body field--type-text-with-summary field--label-hidden field--item quickedit-field">
                <div class="copyright">
                    <p>© MySite 2019</p>
                </div>
            </div>
        </section>
    </div>
</div>

Remember CSS of two sections should use display: block; for one is at top and the other is at bottom.