html - Paragraph tag causing parent to increase width -

I have a basic layout that has a div with a thumbnail, left left, then with some text in it A div (title, description, links) that floats in the form of a sheep They mean to be side-by-side, but as soon as the browser is very narrow, instead of reducing the width only, pushing the other box down from the first

I do not believe that I'm stumped because it's really simple. I really appreciate some help!

html

  & lt; Div class = "stunting-video odd" & gt; & Lt; Div class = "thumbnail" & gt; & Lt; Img src = "https://i.ytimg.com/vi/LixKwLQiSGU/mqdefault.jpg" data-video-id = "LixKwLQiSGU" class = "show-video" alt = "stunting video" & gt; & Lt; / Div & gt; & Lt; Div class = "info" & gt; & Lt; P class = "title" & gt; GTA V - Stunt Practice 03 & lt; / P & gt; & Lt; P class = "description" & gt; Through a race designed to practice a motorbike stunt in GTA V, where you can jump from the dock near the airport. Race is available here ... & lt; Br> & Lt; Br> & Lt; Span class = "highlight" & gt; PS3: & lt; / Span & gt; & Lt; A href = "http://rsg.ms/0330f82" & gt; Http: //rsg.ms/0330f82< / A & gt; & Lt; Br> & Lt; Span class = "highlight" & gt; Xbox360: & lt; / Span & gt; & Lt; A href = "http://rsg.ms/4464ca5" & gt; Http: //rsg.ms/4464ca5< / A & gt; & Lt; Br> & Lt; Br> Special credit for Chadder for the 360 ​​version. & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

CSS

  Body {background color: RGB (20, 20, 20); Color: RGB (238, 238, 221); Font-family: sans-serif; Font-size: 16px; Font-weight: 300; Margins: 20px; } A {color: RGB (111, 178, 244); }. Stunting-video {background-color: RGBA (255, 255, 255, 0.125); Boundary-radius: 30px; Box-shadow: 5 px 5 px 10 px rgba (255, 255, 255, 0.3) inset, -5px-5px10px rgba (0, 0, 0, 0.9) inset; Clean both; Margin: 10 px 0; Overflow: Auto; Padding: 5px 15px 15px; }. Stunting-video Thumbnail {Threshold: 0; Cursor: indicator; Swim left; Margin: 10px 20px 0 0; Padding: 0; }. Stunting-video Thumbnail IMG {boundary-radius: 15px 0 15px; }. Stunting-video.info {float: left; }. Stunting-video Title {color: RGB (245, 215, 122); Font-size: 150%; font-weight: bold; }. Stunting-video p {margin: 5px 0; }         
 The text "itemprop =" text "> 
 is all necessary << strong> no   info  float the div and (on other comments) enough  padding = left  so that the text does not wrap around the thumbnail. 
 
 . Stunting-video.info {padding-left: 350px ;; }  
 
 
 
 Edit 
 
 I was reminded that a table does this automatically and Of course, we have a display: table / table-cell is open to us. 
 
 Removing floats and 
 
 . Stunting-video {display: table; }  
 
 and 
 
 . Stunting-video Thumbnail {display: table-cell; Vertical-alignment: top; }. Stunting-video.info {display: table-cell; Vertical-alignment: top; }