title: Aligning one element to left and other below to right with Flexbox
body: <p>I'm a new Developer, still in the process of learning and have been working on a website for a friend to practice.</p>
  <p>I am adding a 'Meet the team' type section on the page and would like it to be displayed as shown in the image linked here:</p>
  <p><a href="https://i.stack.imgur.com/CqweJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CqweJ.png" alt="enter image description here" /></a></p>
  <ul>
  <li>team member 1 photo with bio next to it aligned to the left..</li>
  <li>.. and below that, team member 2 photo with bio next to it aligned to the right.</li>
  </ul>
  <p>I've been playing with Flexbox to get this to work but having issues such as having them both appear next to each other so tried adding each team member into their own section to separate the code and that hasn't worked well either.</p>
  <p>Code for second issue:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="members"&gt;
      &lt;div class="unit"&gt;
          &lt;img src="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"&gt;
          &lt;h1&gt;James&lt;/h1&gt;
          &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;/p&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;span&gt;Text&lt;/span&gt; Text&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="unit"&gt;
          &lt;img src="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"&gt;
          &lt;h1&gt;Jamie&lt;/h1&gt;
          &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry.&lt;/p&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;span&gt;Tet:&lt;/span&gt; Text&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>