Resize an image dynamically with CSS inside a table-cell div -

i trying create 2 columns of equal width, left 1 containing text , right 1 containing image. image resize down width of column if image width greater column width, image keep original size if image less column width. have tried instructions in this question, image, if larger, consume whatever space needs, squishing column on left containing text. wondering if has how "table-cell" divs behave, or if precedence issue browser accommodate image before text. code looks this:

<div style="display: table; width:100%;">     <div style="display: table-row;">         <div style="display: table-cell; width: 50%; vertical-align: middle;">             <h1>header</h1>             <p>description</p>         </div>         <div style="display: table-cell; width: 50%; vertical-align: middle;">             <img style="max-width: 100%;height:auto;" src="image.jpg">         </div>     </div> </div> 

also, using firefox browser test. thanks!

edit: tried alternative method same effect using float divs (code below). problem 2 columns middle-centered, , cannot smaller float div size full height in parent container, inner contents top-aligned. however, image resize properly, backs hunch problem related how "table-cell" divs behave.

<div style="position: relative;">     <div style="float: left; width: 50%;height:100%;background-color:#f00;">         <div style="display: table;height:100%;width:100%;">             <div style="display: table-row;height:100%;width:100%;">                 <div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">                     <p>content</p>                 </div>             </div>         </div>     </div>     <div style="float: left; width: 50%;height:100%;background-color:#f00;">         <div style="display: table;height:100%;width:100%;">             <div style="display: table-row;height:100%;width:100%;">                 <div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">                     <img style="max-width:100%;height:auto;" src="image.jpg">                 </div>             </div>         </div>     </div> </div> 

code working fine in chrome. seems issue in firefox per article: http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/

adding table-layout:fixed; div styled display:table; gives results you're looking for- allowing image max-width work , respecting cell widths.

<div style="display: table; width:100%; table-layout: fixed">   <div style="display: table-row;">     <div style="display: table-cell; width: 50%; vertical-align: middle;">       <h1>header</h1>       <p>description</p>     </div>     <div style="display: table-cell; width: 50%; vertical-align: middle;">       <img style="max-width: 100%;height:auto;" src="image.png">     </div>   </div> </div>