How can I align partial content on bottom of col in bootstrap 4?

Question

I'm having a three column bootstrap grid. Each column has three containers inside of which I want the last one to be aligned to the bottom of the column. But I couldn't find any solution yet. All containers may have different long content.

e.g.

.line { border-bottom: 1px solid #ccc }

.col-4 { border-bottom: 1px solid #0c0; padding-bottom: 5px }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="line"><b>Lorem ipsum</b></div>
      <div class="line">Lorem ipsum dolor sit amet</div>
      <div class="line"><em>Footnote</em></div>
    </div>
    
    <div class="col-4">
      <div class="line"><b>Lorem ipsum</b></div>
      <div class="line">Lorem ipsum dolor sit amet<br>Lorem ipsum<br>Lorem ipsum</div>
      <div class="line"><em>Footnote</em></div>
    </div>
    
    <div class="col-4">
      <div class="line"><b>Lorem ipsum</b></div>
      <div class="line">Lorem ipsum dolor sit amet</div>
      <div class="line"><em>Footnote</em></div>
    </div>
  </div>
</div>

question from:https://stackoverflow.com/questions/66048979/how-can-i-align-partial-content-on-bottom-of-col-in-bootstrap-4

Answer 1

Waitting for answers