title: Make div fill up rest of the parent
body: <p>I have a header/ container with no specified width (therefore it's as long as the parent). Inside that, I have two smaller divs. Now, the first one should only contain a picture (with a set size), and the other should be as big as there's space left. I can't use a set width, because I don't know the width of the header. 
  How do I do this with pure CSS?</p>
  
  <p>What I want ultimately is a picture, then some text aligned to the right top, and then some text aligned with the bottom of the picture on the left. 
  Do you know of any better way to do this?</p>
  
  <p>Here's a picture so it's easier to understand: </p>
  
  <p><img src="https://i.stack.imgur.com/scjJ9.jpg" alt="Example"></p>
  
  <p>Thanks, Aleksander</p>
  
  <p><strong>EDIT 1:</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="header"&gt;
    &lt;div class="header_left"&gt;
      &lt;div class="pic"&gt;&lt;img width="35px" src="http://upload.wikimedia.org/wikipedia/commons/1/1a/Volkswagen_Logo.png" /&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="header_right"&gt;
      &lt;div class="time"&gt;18m ago&lt;/div&gt;
      &lt;div class="name"&gt;Volkswagen&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.header {
  }
  
  .header_left {
    display: inline-block;
  }   
    .pic {
      margin: 5px;
    }
  
  .header_right {
    display: inline-block;
  }
    .time {
      margin: 5px;
      float: right;
    }
    .name {
      margin: 5px;
      float:left;
    }
  </code></pre>
  
  <p>It's kinda' messy right now, because what I've just been trying a lot of stuff, and this is the last thing.</p>