Wrap 2 column layout around image

I'm trying to create a 2 column layout around an image but no success

This is what I want the layout to be:

This is what I can do so far:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Wrapping an Image with the text
    </title>
      
    <style>
        
        img {
            float: right; 
            margin: 5px;
        }
        p {
            font-size: 20px;
        }
    </style>
</head>
  
<body>
    <h1>Testing</h1>
      
    <div class="square">
        <div> 
            <img style="width: 300px" src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg" alt=""> 
        </div>
        <!-- <div style="column-count: 2">  -->
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim. Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus. Donec auctor justo eu lobortis finibus.

            Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.
        </p>
        <!--</div>-->
    </div>
</body>
  
</html>

if I activated the div with column style 2, the layout will be a mess like this:

What is the solution for this? It's been days and I haven't found any solution yet. Please help.

UPDATE

Sorry, forgot to mention that the sentences must be continuous, so when a sentence is not completed in left column, it will be continued to right column under the image.

Solution

Weil, I finally managed to solve it. Here's my solution:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Wrapping an Image with the text
    </title>
      
    <style>
        div {
          column-count: 2;
          position: relative;
          padding-top: 33%;
          font-size: 20px;
          column-gap: 5%;
        }

        div img {
          position: absolute;
          top: 0;
          right: 0;
          width: 47.5%;
        }

        .first-el {
          margin-top: -70%;
        }
    </style>
</head>
  
<body>
    <h1>Testing</h1>
    
    <div>
        <img src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg">

        <p class="first-el">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?orem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
    </div>
</body>
  
</html>

The image is positioned absolute on top right. It will be placed over the text so I used padding-top in the container and negative margin top in first element of the container which is first-el class to make a space for the image. Both padding-top and margin-top are in percentage to make the room responsive to image's height.

I hope this can help someone who have similar issue.