It's hard for me to see the actual output now because you have put a file link in a codepen source, but the most obvious thing was that you had the div for the text outside the containing div for the image. I moved it inside the text container like this:
<!doctype html>
<html>
<head>
<link href="file:///C:/xampp/htdocs/templatemo_591_villa_agency/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div style="display: flex;">
<div class="about-us-image">
<img class="about-image"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8eIdDmzLY1w6wIbExqOKvBLUV4gSgZn8v2g&s"
alt="smiling-handsome-asian-manager-with-modern-device">
</img>
<div class="about-us-text">
<h2><h2 style="color: #56aeff;">Who We Are</h2>
<p>With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands</p>
</div>
</div>
</div>
</body>
</html>
Next, I added the following CSS for about-us-text.
.about-us-text {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
text-align: left;
padding: 20px;
width: 50%;
}