title: Making images take up all space available in a div
body: <p>Say that I have images contained inside a list, as below.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;img src="http://placehold.it/250x400"&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;img src="http://placehold.it/250x200"&gt;
      &lt;/li&gt; 
      &lt;li&gt;
          &lt;img src="http://placehold.it/250x200"&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;img src="http://placehold.it/250x400"&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/VpcBY/2/" rel="nofollow noreferrer">This fiddle</a> shows what the setup would look like on a page. Is it possible using only CSS to make the second and third list items take up space to the right of the first? If not possible within a list structure, what changes would I need to make to the HTML to make it possible? The solution would ideally work no matter how many images were present in the list.</p>
  
  <p>edit: the image below shows the sort of thing that I'm looking for. The left is what I currently have (as shown in the fiddle), but I would like to have it look like the right hand side of the image.
  <img src="https://i.stack.imgur.com/QIZgr.png" alt="enter image description here"></p>