bootstrap - aligning columns within a div

Question

I am current uni student working on a project. I am trying to create a div with multiple image on the left and text and a button on the right. The problem I am having is that the elements are not lining up. I am using bootstrap classes for this.

The images below are of my current output and what I would like to achieve.

and here is the code:

<style>
   #points{display:block;}
</style>
<div class="row" style="border:black solid 2px;">
  <div class="col-8">
     <img class="img-responsive" src="http://placehold.it/450x250" />
    <div class="row">
      <div class="col-3"> <img class="img-responsive" src="http://placehold.it/210x150" /></div>
      <div class="col-3"> <img class="img-responsive" src="http://placehold.it/210x150" /> </div>
    </div>
  </div>
   <div class="col-4" >
       <div class="property-wrap">
            <div class="text">
              <h3><a href="#">Name </a></h3> 
              <ul class="property_list mt-3 mb-0">
                <li><span class="flaticon-bed"></span>3</li>
                <li><span class="flaticon-bathtub"></span>2</li>
                <li><span class="flaticon-blueprint"></span>1,878 sqft</li>
              </ul>
            </div>
           <div class="text">
               <p>This here is some sample text. This is going to be a mini paragraph. This here is some sample text. This is going to be a mini paragraph. This here is some sample text. This is going to be a mini paragraph. </p>
               <ul > 
                <li id="points">test</li>
                <li id="points">test</li>
                <liid="points">test</li>
                <li id="points" >test</li>
               </ul>
               <a class="btn btn-primary" href="#!">View More →</a>
           </div>
          </div>
        
        </div>
</div>

I am trying to expand the width of the text div so it is next to the images. ( I assume this would shrink the whole div as well - I would like the size of the images).

Could anyone point me in the right direction?

EDIT: after trying the code in the answer my page now looks like this

it is looking better but i would like to condense it - see the blue line i added.

here is the updated code

<div class="row" style="border: red 2px solid; margin: 50px;padding: 10px">
    <div class="col-8">
        <div class="row" style="border: yellow 2px solid; padding: 2px">
            <div class="col-12">
                <img class="img-responsive" src="instagram.jpg" />
            </div>
        </div>
        <div class="row">
            <div class="col-6" style="border: yellow 2px solid; padding: 2px"> <img class="img-responsive" src="product.jpg" /></div>
            <div class="col-6" style="border: yellow 2px solid; padding: 2px"> <img class="img-responsive" src="product.jpg" /> </div>
        </div>
    </div>
    <div class="col-4" style="border: gray 2px solid; padding: 2px">
        <div class="property-wrap">
            <div class="text">
                <h3><a href="#">Name </a></h3>
                <ul class="property_list mt-3 mb-0">
                    <li><span class="flaticon-bed"></span>3</li>
                    <li><span class="flaticon-bathtub"></span>2</li>
                    <li><span class="flaticon-blueprint"></span>1,878 sqft</li>
                </ul>
            </div>
            <div class="text">
                <p>This here is some sample text. This is going to be a mini paragraph. This here is some sample text.
                    This is going to be a mini paragraph. This here is some sample text. This is going to be a mini
                    paragraph. </p>
                <ul>
                    <li id="points">test</li>
                    <li id="points">test</li>
                    <liid="points">test</li>
                        <li id="points">test</li>
                </ul>
                <a class="btn btn-primary" href="#!">View More →</a>
            </div>
        </div>

    </div>

</div>

Answer 1

Try this hope it works for you

 img{max-width: 100%; width: 100%;  border:yellow 2px solid}
 .outer{ border:red 2px solid}
 .right_text{border: gray 2px solid; padding: 15px}

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container outer">
  <div class="row">
  
    <div class="col-sm-6">
      <div class="row">
        <div class="col-sm-12 my-3">
            <img src="https://i.pinimg.com/originals/3b/24/c7/3b24c709566eaab86b97a99b9c084c4c.png">
        </div>
        <div class="col-sm-6">
            <img src="https://i.pinimg.com/originals/3b/24/c7/3b24c709566eaab86b97a99b9c084c4c.png">
        </div>
        <div class="col-sm-6">
            <img src="https://i.pinimg.com/originals/3b/24/c7/3b24c709566eaab86b97a99b9c084c4c.png">
        </div>
      </div>
    </div>
</body>
</html>
    
    <div class="col-sm-6 my-3">
    <div class="right_text">
      <h3>TEXT COLUMN</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris... Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris... Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris... Ut enim ad minim veniam,.</p>
      <button type="button" class="btn btn-success">Success</button>
    </div>
    </div>
    
</div>

Comment if have any query

Answer 2

Here is the sample

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
    #points {
        display: block;
    }
</style>
<div class="row" style="border: red 2px solid; margin: 50px;padding: 10px">
    <div class="col-8">
        <div class="row" style="border: yellow 2px solid; padding: 2px">
            <div class="col-12">
                <img class="img-responsive" src="http://placehold.it/450x250" />
            </div>
        </div>
        <div class="row">
            <div class="col-6" style="border: yellow 2px solid; padding: 2px"> <img class="img-responsive" src="http://placehold.it/210x150" /></div>
            <div class="col-6" style="border: yellow 2px solid; padding: 2px"> <img class="img-responsive" src="http://placehold.it/210x150" /> </div>
        </div>
    </div>
    <div class="col-4" style="border: gray 2px solid; padding: 2px">
        <div class="property-wrap">
            <div class="text">
                <h3><a href="#">Name </a></h3>
                <ul class="property_list mt-3 mb-0">
                    <li><span class="flaticon-bed"></span>3</li>
                    <li><span class="flaticon-bathtub"></span>2</li>
                    <li><span class="flaticon-blueprint"></span>1,878 sqft</li>
                </ul>
            </div>
            <div class="text">
                <p>This here is some sample text. This is going to be a mini paragraph. This here is some sample text.
                    This is going to be a mini paragraph. This here is some sample text. This is going to be a mini
                    paragraph. </p>
                <ul>
                    <li id="points">test</li>
                    <li id="points">test</li>
                    <liid="points">test</li>
                        <li id="points">test</li>
                </ul>
                <a class="btn btn-primary" href="#!">View More →</a>
            </div>
        </div>

    </div>
</div>