title: vertically align some text top and other text bottom div
body: <p>I split a div into left (translations) and right (links). Now I want three lines of text on the right to be aligned to the top and a forth line to be aligned to the bottom. So I created two <code>div</code>s (topLinks and bottomLinks). But I can't get the right <code>div</code> to be the same height as the left. And so the text in bottomLinks shows up right after the topLinks.</p>
  
  <p>How do I get the <code>OPTIONS</code> link to be bottom-aligned?</p>
  
  <p>(Also, I'm using <code>&lt;p&gt;</code> for indent, I think if I set the line-spacing to 0 and use <code>&lt;br&gt;</code> I can avoid the extra height after "aged". Is there a better alternative?)</p>
  
  <p><a href="https://i.stack.imgur.com/56HHm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/56HHm.png" alt="Bottom Align Fail"></a></p>
  
  <p>.css</p>
  
  <pre><code>.links {
    float:right;
    padding:10px;
    text-align:right;
    font-size:11px;
  }
  
  .bottomlinks {
    vertical-align:bottom;
  }
  </code></pre>
  
  <p>.js</p>
  
  <pre><code>function renderBubble() {
      var translations = document.createElement('div');
      translations.setAttribute('class', 'translations');
  
      var translationText = 'alt:&lt;br&gt;&lt;b&gt;';
      var words = ['old', 'ancient', 'aged'];
      for (var index=0; index&lt;Math.min(5, words.length); index++) {
          translationText += '&lt;p class="tab"&gt;' + words[index] + '&lt;/p&gt;';
      }
      translationText += '&lt;/b&gt;';
      translations.innerHTML = translationText;
  
      var links = document.createElement('div');
      links.setAttribute('class', 'links');
  
      var topLinks = document.createElement('div');
      topLinks.setAttribute('class', 'toplinks');
      var linksText = '';
      linksText += '&lt;a target="_blank" href="https://glosbe.com/...&gt;';
      linksText += 'ADD or DETAIL glosbe.com&amp;rarr;&lt;/a&gt;&lt;br&gt;';
      linksText += '&lt;a target="_blank" href="https://translate.google.com/...&gt;';
      linksText += 'TRANSLATE at google&amp;rarr;&lt;/a&gt;&lt;br&gt;';
      linksText += '&lt;a target="_blank" href="https://www.google.com/...&gt;';
      topLinks.innerHTML = linksText;
  
      var bottomLinks = document.createElement('div');
      bottomLinks.setAttribute('class', 'bottomlinks');
      var optionsText = '';
      optionsText += '&lt;a target="_blank" href="https://options"&gt;';
      optionsText += 'OPTIONS&amp;rarr;&lt;/a&gt;';
      bottomLinks.innerHTML = optionsText;
  
      links.appendChild(topLinks);
      links.appendChild(bottomLinks);
  
      bubbleDOM.appendChild(translations);
      bubbleDOM.appendChild(links);
  
      // I tried the following to force the 'OPTIONS' text to be bottom aligned
      var maxHeight = Math.max(translations.offsetHeight, links.offsetHeight);
      translations.style.height = maxHeight + 'px';
      links.style.height = maxHeight + 'px';
  }
  </code></pre>