垂直对齐一些文本顶部和其他文本底部div

Question

我将div分为左（翻译）和右（链接）。现在我希望右边三行文本与顶部对齐，第四行与底部对齐。所以我创建了两个div（topLinks和bottomLinks）。但我无法让div与左边的高度相同。所以bottomLinks中的文字显示在topLinks之后。

如何让OPTIONS链接在底部对齐？

（另外，我正在使用<p>缩进，我想如果我将行间距设置为0并使用<br>我可以避免“老化”后的额外高度。是否有更好的选择？）

的CSS

.links {
  float:right;
  padding:10px;
  text-align:right;
  font-size:11px;
}

.bottomlinks {
  vertical-align:bottom;
}

的.js

function renderBubble() {
    var translations = document.createElement('div');
    translations.setAttribute('class', 'translations');

    var translationText = 'alt:<br><b>';
    var words = ['old', 'ancient', 'aged'];
    for (var index=0; index<Math.min(5, words.length); index++) {
        translationText += '<p class="tab">' + words[index] + '</p>';
    }
    translationText += '</b>';
    translations.innerHTML = translationText;

    var links = document.createElement('div');
    links.setAttribute('class', 'links');

    var topLinks = document.createElement('div');
    topLinks.setAttribute('class', 'toplinks');
    var linksText = '';
    linksText += '<a target="_blank" href="https://glosbe.com/...>';
    linksText += 'ADD or DETAIL glosbe.com&rarr;</a><br>';
    linksText += '<a target="_blank" href="https://translate.google.com/...>';
    linksText += 'TRANSLATE at google&rarr;</a><br>';
    linksText += '<a target="_blank" href="https://www.google.com/...>';
    topLinks.innerHTML = linksText;

    var bottomLinks = document.createElement('div');
    bottomLinks.setAttribute('class', 'bottomlinks');
    var optionsText = '';
    optionsText += '<a target="_blank" href="https://options">';
    optionsText += 'OPTIONS&rarr;</a>';
    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';
}