底部固定的儿童div在另一个儿童div里面

Question

我有一个小问题。我有两列填充动态文本。根据较大的一个，两者都是相同的高度。现在，我希望在更大的div的内容之后有另一个固定的div。我的HTML代码是：

.parent {
  display: inline-flex;
  width: 100%;
}

.child1 {
  display: inline-block;
  background-color: #c5e997;
  width: 49%;
  position: relative;
}

.child2 {
  display: flex;
  position: absolute;
  bottom: 0;
}

<div class="parent">

  <div class="child1">
    Random text here Less dynamic text
    <div class="child2">
      Fixed
    </div>
  </div>

  <div class="child1">
    Random text here<br/> More
    <br/> Dynamic
    <br/> Text
    <br/> Here
    <div class="child2">
      Fixed
    </div>
  </div>

</div>

那么，任何想法如何在更高的动态文本之后设置第二个div？ 此时，“固定”文本显示在最长的文本上。

L.E。：你可以在这里看到代码：https://jsfiddle.net/fte087p7/ 谢谢！

Answer 1

.parent {
  display: inline-flex;
  width: 100%;
}

.child1 {
  display: inline-block;
  background-color: #c5e997;
  width: 49%;
  position: relative;
  padding-bottom: 20px;
}

.child2 {
  display: flex;
  position: absolute;
  bottom: 0;
}

<div class="parent">

  <div class="child1">
    Random text here Less dynamic text
    <div class="child2">
      Text
    </div>
  </div>

  <div class="child1">
    Random text here
    <br/> More
    <br/> Dynamic
    <br/> Text
    <br/> Here
    <div class="child2">
      Fixed
    </div>
  </div>

</div>

如何在padding-bottom中添加.child1？