How to disable element offset in div?

Question

css

There is a div:

<div id="about_block">
      <ul>
        <li>Текст</li>
        <li>Текст</li>
        <li>Текст</li>
        <li>Текст</li>
        <li>Текст</li>
      </ul>
        <a href="#"><img id="about_subs" src="images/img.png" alt="text"></a>
    </div>

The width of the div is 100%, the picture wraps around the ul list on the right, when the screen width changes, the picture shifts to the list, how to prevent this from happening, or rather, so that it approaches the list as close as possible, but does not run into it.
UPD: codepen.io/anon/pen/wzAakg

Answer 1

this is the rare case when tables can be used in the layout)))
the list in the left cell is the picture in the right one))