HTML & CSS CSS having difficulties.

[DarbySan]

Hi, I have an exercise to complete and I have problems with aligning something.

This how my exercise should look.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

View: https://imgur.com/a/VFagevr


And this is how it looks.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

View: https://imgur.com/3r023zr


What my issue is, I can continue and complete the rest of the code, but my only issue is aligning "Cute Kitten" element to the right part of the screen like the other elements are. I was told to use width 48% but I'm confused how exactly I can position them as they are.

Please, if you could explain how you can do this, that would be great. I've uploaded the code down below.

If you could uploading the files will also be a big help, thank you. 🙂

 

[DarbySan]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=]\, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Magazine</h1>
    <section class="container">
      <div class="div-1">
        <h2>Top 5 Cakes</h2>
        <ol class="ol-1">
          <li>Chocolate Eclair</li>
          <li>Victoria Sponge</li>
          <li>Iced Bun</li>
          <li>Lemon Drizzle</li>
          <li>Jam Doughnut</li>
        </ol>
      </div>
      <div class="div-2">
        <h2>Top 3 Movies</h2>
        <ul class="ul-1">
          <li>Star Wars</li>
          <li>The Titanic</li>
          <li>Harry Potter</li>
        </ul>
      </div>
      <div class="div-3">
        <h2 class="h2-background">
          <span class="line-1">I love</span>
          <span class="line-2">Kittens</span>
        </h2>
      </div>
      <div class="div-4">
        <h2>Cute Kitten!</h2>
      </div>
    </section>
  </body>
</html>

body {
  background-color: #fff9cd;
}

h1,
h2 {
  color: white;
  background-color: #007380;
  text-align: center;
  padding: 5px;
  margin: 0;
}

.div-1,
.div-2,
.div-3 {
  border: 2px dashed #007380;
  width: 48%;
  padding: 5px;
  margin: 10px;
}

.div-4 {
  border: 2px dashed #007380;
  width: 48%;
  padding: 5px;
  margin: 10px;
}

.ul-1 li {
  margin-bottom: 10px;
}

.h2-background {
  background-color: #007380;
  padding: 20px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.line-1 {
  order: 1;
}

.line-2 {
  order: 2;
}