[FIXED] How do I break out a element of flex

Issue

I have a h2 and a button for a about me page for a portfolio I'm working on

I am trying to make it so that the h2 that says "About Me" is at the top of the page and that the "More ->" button is at the bottom of the "About-text" div

I have the parent element set as a flex row and I also have a media query so it changes into a column on a smaller screen.

.about-me {
      width: 100%;
      height: 100vh;
      background-color: #f5a962;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .about-text {
      height: 85%;
      width: 45%;
      overflow: hidden;
      border: 2px solid red; /* will be removed when pushed to AWS  */
    }
    .about-text h3  {
      font-family: 'Titillium Web', sans-serif;
      color: white;
      font-size: clamp(2em, 1vw, 4em);
      padding: 1%;
    }
    .about-text p  {
      font-family: 'Titillium Web', sans-serif;
      padding: 1em;
      color: white;
      font-size: clamp(1em, 1vw, 4em); 
      text-indent: 2em;
    }
     .about-text input {
      border-radius: 35%;
      flex: none;
    } 
    .about-img {
      border-radius: 50%;
    }
@media only screen and (max-width: 600px) {
  .about-me {
    flex-direction: column;
  }
  .about-text {
    flex-direction: column;
    width: 90%;
  }
}

<div class="about-me">
  <h2>About Me</h2>
  <div class="about-text">
    <h3>Hello,</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
    Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
    Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
    Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
      Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
      Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
      Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
      Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
      Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
      Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
    </div>
  <form action="#">
    <input type="submit" value="More &rarr;" />
  </form> 
  <img class="about-img"src="img.jpg" alt="A image">
</div>

Solution

You can go ahead and put the <h2>About Me</h2> outside the <div class="about-me">.

Change your code to this:

<h2>About Me</h2>
<div class="about-me">
  <div class="about-text">
    <h3>Hello,</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
    Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
    Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
    Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
      Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
      Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
      Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dicta nulla, minima repellat facilis quisquam numquam earum quasi suscipit obcaecati sit et minus, aliquam nihil consequatur eligendi aut, culpa ab?
      Perferendis amet perspiciatis blanditiis fuga veniam cupiditate vitae expedita non? Laudantium, tempora quisquam. Quaerat eius explicabo cupiditate suscipit ab laudantium asperiores! Possimus, impedit magni sequi atque iure doloremque reiciendis vel!
      Impedit sit quod aliquid itaque obcaecati quasi voluptatibus adipisci a ea animi, suscipit deleniti aliquam excepturi cumque quos, quidem vitae voluptate. Atque doloribus, unde corporis libero earum asperiores quibusdam nihil.
      Nam iure ut quasi velit ipsam perspiciatis et nisi recusandae vero provident culpa, iste saepe dolore numquam accusamus? Consequuntur aperiam eum tempore laudantium expedita non asperiores! Maiores deserunt explicabo qui!</p>
    </div>
  <form action="#">
    <input type="submit" value="More &rarr;" />
  </form> 
  <img class="about-img"src="img.jpg" alt="A image">
</div>

The problem is that you have the flex-direction: row in your about-me div which causes all the elements inside it to be aligned in a row so all you had to do was put the h2 heading outside the about-me div and you are all good to go.

Answered By - Syed Mohammad Sannan

Answer Checked By - Marilyn (PHPFixing Volunteer)