Trying to get two parent divs in a container div to display in a row with one of the parent divs repeating multiple rows without affecting 2nd parent

I'm creating my WordPress theme from scratch, and this is a template for the posts that appear on the front page that would be added dynamically. I'm also using bootstrap 5 for this.

I have a container div that contains a div that houses the categories. The blog posts are not in a parent div itself because if I put that in a parent div, the image appears above the article title. I'm trying to achieve this look:

enter image description here

How do I achieve this result, especially if I put the article image with the rest of the article-related divs inside a parent div? What would be an ideal way of doing this?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

  <title>Test</title>
</head>

<body>

  <div class="row mx-0 mt-4" style="width: 800px;">

    <!-- Article Section -->


    <div class="col-12 col-md-2 ">
      <img src="https://i.ibb.co/xmMv1Sg/benaja-germann-c-Rc-ZLSE7h-Q-unsplash.jpg" class=" img-fluid mx-auto d-block pb-4 pb-md-0" alt="" style="height: 200px">
    </div>

    <div class="col-12 col-md-10 col-lg-7 pe-md-5 ">

      <div class="row ">

        <div>
          <div class="mb-1">Article Title</div>
        </div>

        <div>
          <div class=" mb-2">Date</div>
        </div>

        <div>
          <div class="mb-2 "> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repellat officiis aliquam cum praesentium illum quo dignissimos, assumenda rerum reiciendis, aspernatur voluptas! Molestiae alias odio expedita molestias quibusdam consequatur
            repudiandae.
          </div>
        </div>

        <div>
          <div>
            <a href="">Continue Reading</a>
          </div>
        </div>

      </div>

    </div>

    <!-- Category section -->
    <div class="col-3 d-none d-sm-none d-md-none d-lg-block " id="categoryContainer">
      <div>
        CATEGORIES
      </div>

      <a href="">
        <div class="row px-0 mx-0">
          <div class="col-auto me-auto px-0">Test</div>
          <div class="col-auto px-0">(10)</div>
        </div>
      </a>

      <hr class="my-0 ">

      <a href="">
        <div class="row px-0 mx-0">
          <div class="col-auto me-auto px-0">Test</div>
          <div class="col-auto px-0">(10)</div>
        </div>
      </a>

      <hr class="my-0 ">

      <a href="">
        <div class="row px-0 mx-0">
          <div class="col-auto me-auto px-0">Test</div>
          <div class="col-auto px-0">(10)</div>
        </div>
      </a>

      <hr class="my-0 ">

      <a href="">
        <div class="row px-0 mx-0">
          <div class="col-auto me-auto px-0">Test</div>
          <div class="col-auto px-0">(10)</div>
        </div>
      </a>

      <hr class="my-0 ">

      <a href="">
        <div class="row px-0 mx-0">
          <div class="col-auto me-auto px-0">Test</div>
          <div class="col-auto px-0">(10)</div>
        </div>
      </a>

    </div>

  </div>


  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>

</html>

^ Expand the snippet to full page to see the categories section


Solution 1:

Here you go... See the snippet below.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <title>Test</title>
  <style>
    #img {
      width: 100%;
    }
  </style>
</head>

<body>

  <div class='row w-100 d-flex justify-content-between'>
    <div class='col-8'>
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-4 p-4">
              <img id='img' src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg">
            </div>
            <div class="col-8 p-4">
              <div class="title mb-3">Article Title</div>
              <div class="date mb-2">Date</div>
              <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio neque debitis temporibus perspiciatis corporis eos voluptatum nam tempore itaque provident accusamus reiciendis, error ipsum magnam! Iste facilis nobis porro fuga.</div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row">
            <div class="col-4 p-4">
              <img id='img' src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg">
            </div>
            <div class="col-8 p-4">
              <div class="title mb-3">Article Title</div>
              <div class="date mb-2">Date</div>
              <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio neque debitis temporibus perspiciatis corporis eos voluptatum nam tempore itaque provident accusamus reiciendis, error ipsum magnam! Iste facilis nobis porro fuga.</div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row">
            <div class="col-4 p-4">
              <img id='img' src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg">
            </div>
            <div class="col-8 p-4">
              <div class="title mb-3">Article Title</div>
              <div class="date mb-2">Date</div>
              <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio neque debitis temporibus perspiciatis corporis eos voluptatum nam tempore itaque provident accusamus reiciendis, error ipsum magnam! Iste facilis nobis porro fuga.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3 p-4">
      <div>CATEGORIES</div>
      <div>Category 1</div>
      <div>Category 2</div>
      <div>Category 3</div>
      <div>Category 4</div>
      <div>Category 5</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>

</html>