javascript - to divs in a wrapper div with max width next to each other -

i've got div wrappes 2 other divs. 1 of contains image , other text. 1 image should shown on left hand side of div containing text.

the wrapper div got max width. if 1 reached, text should start wrap inside of text div.

no matter tried (float, flex, inline-block) not manage result works. make work until text starts wrap. 2 divs sudden under each other again.

if give me hand here, glad.

html

<div  class="toast" > <div class="toastimg"><img style="float:left;margin-left:8px;width:24px" src="http://www.gravatar.com/avatar/09f4f4e7486e3a25f4c4883258fd32d6/?default=&amp;s=80"></div> <div class="toasttext">blablalsadosaoadblablalsadosaojdoad</div> </div> 

css

.toast {     width:auto;     max-width:300px;     height:auto;     background-color: #383838;     color: #f0f0f0; } .toastimg{   float:left;   width:10%; } .toasttext{     width:90%; } 

http://jsfiddle.net/egxtu/582/

you can flexbox , word-break: break-all. here fiddle. or instead of flexbox can use display: table demo

.toast {    max-width:300px;    background-color: #383838;    color: #f0f0f0;    display: flex;  }    .toasttext {    word-break: break-all;  }

<div  class="toast" >    <div class="toastimg"><img style="float:left;margin-left:8px;width:24px" src="http://www.gravatar.com/avatar/09f4f4e7486e3a25f4c4883258fd32d6/?default=&amp;s=80"></div>    <div class="toasttext">blablalsadosaoadblablalsadosaojdoad</div>  </div>