Bottom fixed Kind Div in einem anderen Kind div

Question

Ich habe ein kleines Problem. Ich habe zwei Spalten mit dynamischem Text gefüllt. Beide haben die gleiche Höhe wie die größere. Jetzt möchte ich ein anderes festes div nach dem Inhalt des größeren div. Mein HTML-Code ist:

.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>

So eine Idee, wie die zweite div nach dem höheren dynamischen Text setzen? In diesem Moment wird der Text "Fixed" über den längsten Text angezeigt.

L.E .: Sie können den Code hier sehen: https://jsfiddle.net/fte087p7/ Vielen Dank!

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>

über Wie padding-bottom in .child1 hinzufügen?