title: Position image to the right of content using css/bootstrap
body: <p>I am trying to position an image to the right of the content area as shown in this dribble shot.</p>
  <p><a href="https://dribbble.com/shots/15571736-Money-Transfer-Website" rel="nofollow noreferrer">https://dribbble.com/shots/15571736-Money-Transfer-Website</a></p>
  <p>Here is what I have so far.</p>
  <p><a href="https://codepen.io/pinapelkod/pen/RwLJJNm" rel="nofollow noreferrer">https://codepen.io/pinapelkod/pen/RwLJJNm</a></p>
  <pre><code>.content {
    position: relative;
  }
  .bg-image {
    position: relative;
    top: 350px;
    left: 450px;
    height: 350px;
    z-index: 2;
  }
  </code></pre>
  <p>When I float the image or position using top and left properties, the layout gets distorted.</p>