Creating a Rudimentary Layout

I can’t figure out how to sort these three elements out such that

  • the purple sits in the bottom of the container taking up the full width of the container
  • the blue and yellow occupy the top half with the horizontal space divided equally between them
    <!DOCTYPE html>
    <html lang="en">

      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
        .container {
          width: 600px;
          height: 800px;
          border: 4px solid black;
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          align-items: flex-start;
          text-align: center;
        .yellow {
          height: 400px;
          width: 300px;
          background: rgb(255, 251, 0);
        .blue {
          height: 400px;
          width: 300px;
          background: rgb(0, 156, 247);
        .purple {
          height: 400px;
          width: 600px;
          background: rgb(89, 0, 255);
          color: white;

      <div class="container">
        <div class="yellow">yellow</div>
        <div class="blue">blue</div>
        <div class="purple">purple</div>


add this after - flex-wrap: wrap; after text-align: center;

Add - flex-wrap: wrap; after text-align:center;

Wow! That’s beautiful! Exactly what I wanted so thanks very much for that insight. Having said that, I haven’t got a clue as to what this property and its value is - I don’t think I have encountered it in my studies so far. But you’ve given me a great topic to look into further.