Two divs besides one another with content wrapping from second div

Question

I'm looking for a solution to position two divs one besides the other in a <td> .
The first div element is an image that's fixed size.
The second div element is a link (text) of unknown length.

I want to wrap the second div's content on resize of the browser window but the wrapped content should not appear below the image (div-1) and should not flow out of row.

Expected behaviour should be as shown below :

Current behavior is as shown below :

There is a similar question , but wrapping is not expected there and I want wrapping in my second div.

thank you for your help

Code I currently have is :

<td class="infoElement" data-ng-if="::!item.empty">
 <div style="overflow: auto">
    <div style="display: inline-block" class="ListIcon" data-context-link="item"></div>
    <div style="overflow: hidden; display: inline-block;">
        <a data-ng-bind="::item.displayName"></a>
    </div>
 </div>
</td>

Answer 1

Easiest way to achieve this is with Flexbox.

https://jsfiddle.net/Lnocagr2/2/

HTML:

<div class="container">
  <section>
    <div class="smallDiv">
      smalldiv
    </div>
    <div class="largeDiv">
      <ul>
        <li>bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla bla foo bla</li>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </div>
  </section>
  <section>
    <div class="smallDiv">
      smalldiv
    </div>
    <div class="largeDiv">
      <ul>
        <li>bla</li>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </div>
  </section>
  <section>
    <div class="smallDiv">
      smalldiv
    </div>
    <div class="largeDiv">
      <ul>
        <li>bla</li>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </div>
  </section>
</div>

CSS:

.container{
  width:100%;
}
section{
  width:100%;
  display:flex;
  flex-direction:row;
}
.smallDiv{
  width:100px;
}
.largeDiv{
  flex:1;
}