send non-floating section to bottom of floating sections

Question

I am currently developing a website with a segment that contains two vertical columns, and an additional <section\> thing.

.date-and-time {
  width: 50%;
  height: 640px;
  text-align: center;
  background-image: url("23886156160_c5eccde006_k.jpg");
  background-size: contain;
  color: white;
  background-repeat: no-repeat;
  /* aspect ratio is 3:2 */
}

.stages {
  width: 40%;
  height: 840px;
  text-align: center;
  background-image: url("26131038271_134105f1c6_o.jpg");
  background-size: contain;
  color: white;
  background-repeat: no-repeat;
  /* aspect ratio is 9:16 */
}

.setlist {
  width: 50%;
  height: 1000px;
  text-align: center;
  background-image: url("34673487356_4ff216bdde_o.png");
  background-size: contain;
  background-repeat: no-repeat;
  /* aspect ratio is 4:5 */
}

.setlist > a {
  color: rgb(200, 0, 200);
}

.shop {
  width: 40%;
  height: 800px;
  background-image: url("36178934202_a57d6ef55e_o.png");
  background-size: contain;
  background-repeat: no-repeat;
  /* aspect ratio is 5:4 */
  text-align: center;
}

.shop > a {
  color: rgb(200, 0, 200);
}

.wrapper {
  height: 1600px;
}

.left-col {
  float: left;
  width: 60%;
}

.right-col {
  float: right;
  width: 40%;
}

.other-stuff {
  bottom: 0;
}

<section class="left-col"\>
   <p>Located at Sydney Showground.
    Date: 19-24 July 2022
                <a href="information.html">More information.</a>
   </p>
   <p>Over 100 musical acts will be performing at Vapor-fest!
            Find out more <a href="setlists.html">here!</a></p>
   <p>With a total of 10 unique areas, there's something for everyone at Vaporfest!
            More information about the stages can be found <a href="stages.html">here.</a></p>
            <p>Official Vaporfest merchandise is now available!
            <a href="shop.html">Go check it out!</a></p>
        <section class="other-stuff">
            <p class="booking">There are a limited amount of Vaporfest tickets available, so <a href="booking.html">now is the time to book!</a></p>
      <p class="about-us"></p>
      <p class="contact-us"></p>
</section>
` <section class="right-col">
 <p class="stages">With a total of 10 unique areas, there's something for everyone at Vaporfest!
More information about the stages can be found <a href="stages.html">here.</a></p> 
<p class="shop">Official Vaporfest merchandise is now available! <a href="shop.html">Go check it out!</a></p>
 </section>`

How do I get the .other-stuff section below both the .left-col and .right-col sections with the background of .other-stuff going below the sections as well?

I've tried changing the formatting multiple times, but at best only the text goes below.