Reports

Use flex to push the bottom image down inside the .pinkborder card enter image description here
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Schoolbell&family=Waiting+for+the+Sunrise&display=swap">
    <title>Image Bottom Alignment Test</title>

    <!-- css start --> 
        <style>
      .contain {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 50px;
        margin: 10%;
      }

      .pinkborder {
        background-color: red;
        width: 300px;
        height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Push top content and bottom image apart */
        align-items: center;
        padding: 10px;
        color: white;
        font-family: 'Schoolbell', cursive;
      }

      .topcontent {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .downalign {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
      }
    </style>

    <!--end --> 

  </head>
  <body>
    <div class="contain">
      <div class="pinkborder">
        <div class="topcontent">
          <img src="https://picsum.photos/200/300">
          <div>
            ╰⠀╮⠀e⠀╭⠀╯<br>
            aerhaedhaedhaedh<br>
            aethaethahartdg
          </div>
        </div>
        <div class="downalign">
          <img src="https://picsum.photos/200">
        </div>
      </div>

      <div class="pinkborder">
        <div class="topcontent">
          <img src="https://picsum.photos/id/237/200/300">
          <div>
            ╰⠀╮⠀e⠀╭⠀╯<br>
            aerhaedhaedhaedh<br>
            aethaethahartdg
          </div>
        </div>
        <div class="downalign">
          <img src="https://picsum.photos/200">
        </div>
      </div>
    </div>
  </body>
</html>
79728330
