別の子div内の下位固定子div div

Question

小さな問題があります。私は動的なテキストでいっぱいの2つの列を持っています。どちらも大きなものによると同じ高さです。さて、大きな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>

ので、高いダイナミックテキストの後の第2のdivを設定するために、どのように任意のアイデア？ この時点で、「固定」テキストが最も長いテキストにわたって表示されます。

L.E：ここにコードが表示されます。https://jsfiddle.net/fte087p7/ ありがとうございます！ .child1でpadding-bottomの追加について

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>

どのように？