I am trying to align an image closer to its right container border while also trying to align a text closer to the left of its own container border but still give spacing between the two elements between both containers so that the two elements within each containers don't stick too close to one another with a bit of a gap in between like my canva design in the first image below. I got the second image beneath that as my result
Beneath is the specific HTML for the element I am trying to fix
<body><div style="display: flex;"><div class="about-us-image"><img class="about-image" src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/smiling-handsome-asian-manager-with-modern-device.jpg" alt="smiling-handsome-asian-manager-with-modern-device"></img></div><div class="about-us-text"><h2><h2 style="color: #56aeff; font-size: 40px; font-family: Arial;">Who We Are</h2><p><p style=font-size:20px;">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></body>Below is the specific CSS for this particular element
.about-us-image { display: flex; justify-content: flex-end; align-items: center; width: 50%; gap: 45;}.about-image { height: 500px; width: 400px; box-sizing: border-box;}.about-us-text { text-align: left; padding: 100px; width: 50%; box-sizing: border-box; align-self: start; padding: 80px 50px 0 0; padding-left:none; padding-top: 0%; padding-right: 25px;If you want to view my full code it's on JSfiddle: full code
I have tried asking other forums on possible solutions but none has worked. I have also tried asking this exact same question before on Stackoverflow but my questions keep being declined on the basis of faulty spelling errors in my code and code being too aligned to the left when in fact all of my codes are already indented. I have also moved my CSS for this web page into the HTML where before the CSS was an internal file.