html - How do I place an image on the right side of the page without moving the text

Question

As the question says I want to add text to my div tag, but as I do, all the text on the page goes shifted down. I've tried placing the image tag in different places and using the align but the text still gets shifted down and I can't center my image in the middle of my rectantgle. This is my HTML and the CSS:

<div class="rectangle1">
        <img class="pic1" src="../Images/1082.JPG" />
          <p class="rec1">Villa Tary is a charming Villa partly built from old wood on a 550sqm plot of land in the centre of Canggu. The villa is conveniently located between the beach (400m) and the beautiful Canggu club (500m) whose facilities can be fully enjoyed by the guests of the villa.</p>
    </div> 



.rectangle1 {
    height: 500px;
    width: 100%;
    background-color: white;

.rec1 {
    float: left;
    margin-right: 50%;
    margin-top: 150px;
    margin-left: 25px;
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;

.pic1{
    float: right;
    height: 280px;
    width: 400px;
}

question from:https://stackoverflow.com/questions/65913227/how-do-i-place-an-image-on-the-right-side-of-the-page-without-moving-the-text

Answer 1

try this...

.rectangle1 {
      height: 500px;
      width: 100%;
      background-color: white;
  }
  .rec1 {
      float: left;
      margin-top: 150px;
      margin-left: 25px;
      font-family: 'Open Sans', sans-serif;
      font-size: 30px;
  }
  .pic1{
      float: right;
      height: 280px;
      width: 400px;
  }

<div class="rectangle1">
        <p class="rec1">
          <img class="pic1" src="../Images/1082.JPG" />
          Villa Tary is a charming Villa partly built from old wood on a 550sqm plot of land in the centre of Canggu. The villa is conveniently located between the beach (400m) and the beautiful Canggu club (500m) whose facilities can be fully enjoyed by the guests of the villa.
        </p>
    </div>