Position image to the right of content using css/bootstrap-CodePudding

I am trying to position an image to the right of the content area as shown in this dribble shot.

https://dribbble.com/shots/15571736-Money-Transfer-Website

Here is what I have so far.

https://codepen.io/pinapelkod/pen/RwLJJNm

.content {
  position: relative;
}
.bg-image {
  position: relative;
  top: 350px;
  left: 450px;
  height: 350px;
  z-index: 2;
}

When I float the image or position using top and left properties, the layout gets distorted.

CodePudding user response：

<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
   ...text...
</div>

CodePudding user response：

I restructured the html and added a bootstrap display (d-flex) class as shown below.

Update HTML structure:

<div >
          <div >
           .....
          </div>
          <div >
           .....
          </div>
          <div >
            <img  src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
          </div>
</div>

The corresponding CSS:

.content {
  position: relative;
}

.bg-image {
  position: relative;
  top: -310px;
  left: 160px;
  height: 500px;
}

Link to codepen: https://codepen.io/pinapelkod/pen/RwLJJNm