html - Two divs side by side, the right one's width decided by its content, the left one takes up all available space? -

in right div have image , link. images might load have huge variety of aspect ratios (from 0.38 6.83) , have no control on source images need have proper aspect ratio. that, i've given max-width image thinner width.

i'm trying first div (.owner-info-container) take left on space in parent second div (.primary-image-container) doesn't use. if image doesn't take entire space allowed max-width, i'd left container not leave white space.

i've messed floating second div right if first div's content gets wide won't break new line, it'll push second div down.

html

<div class="owner-address col-xs-12">   <div class="owner-info-container">     <h3>address</h3><br/>     <span class="owner-info">       <span class="header">owner name</span><br/>       <span>name goes here</span>     </span>   </div>   <div class="primary-image-container">     <img />     <a>send updated photo</a>   </div> </div> 

you can accomplish using flexbox.

if assign display: flex; .owner-address class, , give .owner-info-container flex-grow: 1;, take remaining space within .owner-address.

css

.owner-address {   display: flex; }  .owner-info-container {   flex-grow: 1; } 

jsfiddle