title: How do I shift the image and text section below my main image as its overlapping?
body: <p>I want the text and image below this main full-size image section as normally we see in websites usually. I am new to programming. 
  I want to make below the main image a section with the image on right and text as shown in image link below.
  Here is my code :    </p>
  
  <p><code>http://jsfiddle.net/165hkr8x/1/</code></p>
  
  <p><code>&lt;script async src="//jsfiddle.net/165hkr8x/1/embed/"&gt;&lt;/script&gt;</code></p>
  
  <p><a href="https://i.stack.imgur.com/mI06J.png" rel="nofollow noreferrer">This is what I am getting</a>
  <a href="https://i.stack.imgur.com/OiUnE.png" rel="nofollow noreferrer">This is what I want</a></p>