Image and text coming in same line

Question

I'm designing a small webpage with image and content in it.
In our app we have 2 modes of reading, Scroll mode and Book mode. In book mode, everything looks fine.
But when i switch to scroll mode, the image and data come to appear on the same line. please let me know how can i fix this.
Below is my code.

<div class="pgnfigure">
                    <img alt="" align="left" class="headImg" src="18.jpg" assetid="er:#18">
                </div>
  <div class="para_Grey">savbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfgh</div>

And CSS

 .pgnfigure {
    padding-bottom: 10em;
}
.para_Grey{
  text-align: justify;
}

I cant produce a scroll view css, since this is designed as per book view. here is a working fiddle https://jsfiddle.net/6vkhxd8f/

Answer 1

.para_Grey{
  display:block;
  text-align: justify;
}

Answer 2

I think everything just works fine as long as you don't want to break words JsFiddle . However if you want to break words then just add word-wrap: break-word to your div as in here

Or if you're facing problems with width of the div, and some scroll-issues, you may have to add max-width: 100%; and sometimes if scroll doesn't work yuy may have to add overflow-y:auto;

Answer 3

you can use another div in between both div

<div style="clear:both;"></div>

it will take another div in next line