Simple HTML/CSS alignment resize - css

Question

The following code is working fine on every navigator and a screen resolution above 600px width. But, on small screens, my image is getting under the text when I'm resizing the window or viewing it on small smartphone screen...
<div id="messagedisp">
<div id="messagedisp-left">
<img src="http://lorempixel.com/400/200" width="86" height="185" id="messagedisp-inner">
</div>
<div id="messagedisp-right"><p>Long paragraph text about 500 chars</p>
</div>
</div>
You can exactly simulate the problem by resizing the width of your screen by hand. Here you have: https://jsfiddle.net/ch7fuc8o/1/
Do you have any idea how to fix this with the more "simple" way?

Answer 1

I have a couple of suggestions to make the code better and easier to mentain:
use semantics tags
use flexbox for organizing instead of floating.
use media query to adapt to phone screen
/* default appearance */
article > * {
padding: 20px;
}
/* Flexbox */
article {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
#media screen and (min-width: 600px) {
article {
-webkit-flex-direction: row;
flex-direction: row;
}
article > * {
-webkit-flex: 1;
flex: 1;
}
article > div {
-webkit-flex: 3;
flex: 3;
}
}
#media screen and (max-width: 600px) {
article {
-webkit-flex-direction: column;
flex-direction: column;
}
}
<article>
<img src="http://lorempixel.com/400/200" width="86" height="185" />
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sint, quis animi! Eum illum mollitia odit at cupiditate quas qui animi, voluptas harum maxime? Architecto vitae sint id libero! Minima harum facere, corporis consequuntur ipsa dicta neque
incidunt illo ad inventore iusto, soluta, enim blanditiis tempora ratione? Deleniti nihil, aspernatur facilis fuga quasi ipsam earum animi optio asperiores ut temporibus explicabo nisi maxime dicta illo assumenda? Accusantium reiciendis quasi modi!
Qui voluptas, voluptatem aut reprehenderit magni cupiditate omnis odit? Blanditiis, suscipit, odit? Rerum distinctio quos veritatis necessitatibus recusandae fugit dolore, quia, incidunt, odit labore laborum accusamus aliquid similique voluptas libero
ratione ullam doloremque quaerat porro rem, blanditiis fugiat est. Aliquid dolorum fuga praesentium expedita odit, fugit ipsam ullam eligendi impedit, inventore qui veritatis odio cum sapiente at dolorem ex, excepturi. Tempore eum tenetur illum rerum
dolore aperiam id ex assumenda eligendi ad nulla repellendus expedita officia provident fuga ipsa quibusdam, nesciunt sequi delectus, adipisci veritatis suscipit qui. Atque a aliquam magni culpa eum vero autem distinctio provident, omnis exercitationem?
Saepe dolor voluptas voluptatum iusto quidem nostrum, rerum incidunt beatae alias ipsum sunt non in distinctio debitis provident minima hic deserunt soluta. Architecto unde eligendi iure esse omnis ab, nam accusamus recusandae! Sapiente, dolorum corporis
debitis laudantium fuga soluta rem sunt reiciendis similique? Esse vero vel obcaecati quam asperiores doloremque odit dolores pariatur ut assumenda ullam repellat dicta, iste modi est, dolorem consequuntur, molestias vitae. Voluptatem officia, explicabo!
Sint perspiciatis ab odit maxime totam id eum ipsum assumenda suscipit! Praesentium, a, aliquid sit laudantium minus odio excepturi nobis, nihil fugiat soluta quo tenetur debitis aperiam officia facilis! Porro in, ut et omnis. Earum pariatur quae,
nulla quibusdam quidem fuga molestias, vero eius harum praesentium ratione magni culpa quia distinctio ducimus ea eos doloremque unde similique asperiores repellat, necessitatibus dolorum sunt? Quidem, aliquam. Cum corrupti eveniet laborum! Ex porro
commodi adipisci, laudantium inventore temporibus tempora quo voluptate omnis saepe ab at aliquid, incidunt deleniti optio perspiciatis obcaecati! Veniam id, nostrum obcaecati rerum harum necessitatibus! Aliquid aspernatur nam saepe dolores ipsam
voluptas reiciendis molestiae modi neque sunt, nobis, consequatur sed aliquam. Ut, tenetur dolor delectus at, sit repellendus veniam nam cumque itaque tempore facilis et atque dignissimos consectetur libero harum! Consequatur iure sequi, ratione tempora.
Totam doloremque, sequi voluptate maiores. Illo natus corporis pariatur vel cumque molestiae hic saepe illum nemo voluptatem tempore, sequi repellat impedit optio molestias eaque iure quas dolor, assumenda veritatis laborum fugit porro sed. Necessitatibus
quisquam maiores ut neque soluta harum, odit deleniti labore, culpa illum ad explicabo doloremque! Beatae culpa debitis, natus excepturi adipisci magni, iste dolor dolorem odio rerum! Id suscipit itaque accusamus incidunt, laborum blanditiis deserunt
rem totam doloribus debitis non molestiae perferendis vitae necessitatibus corporis eum quas explicabo ab odio. Fuga porro iure corporis vitae cumque in quod deleniti autem ducimus alias perspiciatis cupiditate distinctio dignissimos doloribus ipsam,
delectus quam blanditiis accusantium inventore nesciunt. Excepturi reprehenderit laborum doloremque voluptatibus. Temporibus, sed, maiores. Illo dolorum cum culpa ratione, nam amet dicta vero ut reiciendis, dolor facilis.</div>
</article>

Answer 2

Should make the job.
CSS
.imagecss{
max-width: 100%;
}
HTML
<div id="messagedisp">
<div id="messagedisp-left">
<img src="http://lorempixel.com/400/200" class="imagecss" id="messagedisp-inner">
</div>
<div id="messagedisp-right"><p>Long paragraph text about 500 chars</p>
</div>
</div>