Static Template

You could use css gird for the layout.

You can change

<div id="heading-div">
      <h1 id="top-heading" class="dark-violet">
         10,000+ of our <br>users love our <br>products.
      </h1> 

      <p id="para-1">
        We only provide great products combined with excellent customer service.
        See what our satisfied customers are saying about our services.
      </p>
   </div>

    <div id="right-rating">
     <div class="light-pink" id="top-pink">
        <div class="star">
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
        </div>

        <div class="rating dark-violet" >
           Rated 5 Stars in Reviews
        </div>
     </div>

     <div class="light-pink" id="middle-pink">
        <div class="star">
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
        </div>

        <div  class="rating dark-violet">
          Rated 5 Stars in Report Guru
        </div>
     </div>

     <div class="light-pink" id="last-pink">
        <div class="star">
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
        </div>
        
        <div  class="rating dark-violet">
          Rated 5 Stars in BestTech
       </div>
     </div>
</div>


to:

<div class="grid"> <div> <div id="heading-div"> <h1 id="top-heading" class="dark-violet"> 10,000+ of our <br>users love our <br>products. </h1>

  <p id="para-1">
    We only provide great products combined with excellent customer service.
    See what our satisfied customers are saying about our services.
  </p>

</div> <div> <div> <div id="right-rating"> <div class="light-pink" id="top-pink"> <div class="star"> <img src="icon-star.svg" alt="5 Stars as icons" > <img src="icon-star.svg" alt="5 Stars as icons" > <img src="icon-star.svg" alt="5 Stars as icons" > <img src="icon-star.svg" alt="5 Stars as icons" > <img src="icon-star.svg" alt="5 Stars as icons" > </div>

    <div class="rating dark-violet" >
       Rated 5 Stars in Reviews
    </div>
 </div>

 <div class="light-pink" id="middle-pink">
    <div class="star">
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
    </div>

    <div  class="rating dark-violet">
      Rated 5 Stars in Report Guru
    </div>
 </div>

 <div class="light-pink" id="last-pink">
    <div class="star">
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
    </div>
    
               <div  class="rating dark-violet">
             Rated 5 Stars in BestTech
          </div>
       </div>
    </div>
</div>

</div>```

Your css can then be something like:

.grid {
    display: grid;
   grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
}


That would be for the first two columns.