title: Vertical align two columns, a shorter and a longer text
body: <p>here is a simplified fiddle of what I'm working on:</p>
  
  <p><a href="http://jsfiddle.net/acolombo/xxab2345/" rel="nofollow noreferrer">http://jsfiddle.net/acolombo/xxab2345/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="DivB"&gt;Just another text.&lt;/div&gt;
      &lt;div id="DivA"&gt;Lots and lots of text. Lots and lots of text.Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
      overflow: hidden;
  }
  #DivA {
      overflow: hidden;
      background: #ccc;
  }
  #DivB {
      float: right;
      background: #000;
      color: #FFF;
  }
  </code></pre>
  
  <p>I've tried in many ways to vertical align the shorter text with the longer one keeping everything responsive but I can't seem to find a valid solution. </p>
  
  <p>All the similar questions I found use something not dynamic, let's say a fixed width, height, margin or anything else, and these solutions won't work for my problem. Thanks!</p>
  
  <p>Edit: Sorry, I forgot to write that the shorter line still needs to keep its size like in the example I posted, the longer text needs to shrink besides it
   while it stays still</p>