html - Maintaining dynamic heights in Bootstrap Column Divs

Question

I have two rows written in a sequence. I am getting an output like this.Stackblitz link

I need to get that RHS in the top right corner at the same level as LHS. Since I have simplified my actual question, please do not suggest having both LHS div and RHS div in the same class="row". I need to keep them seperate in different class="rows". I simply want RHS div to be at the top irrespective of LHS div.

 <div class="row">
    <div class="col-md-9">
     LHS DIV
     This is a div which can have a dynamic height.
    </div> 
</div>
<div class="row" style="margin-top: inherit;">
    <div class="col-md-9">
    </div>
    <div class="col-md-3">RHS DIV</div>
</div>

PS:

1. I tried using margin-top: -30%; but the problem is this percentage is dependent on the height of the LHS div.
2. Both LHS and RHS divs can be of variable height. Any help is welcomed.

question from:https://stackoverflow.com/questions/65600843/maintaining-dynamic-heights-in-bootstrap-column-divs

Answer 1

A solution using bootstrap classes

.rhs-div {
  border: 1px solid red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="container d-md-flex">
  <div class="row mx-0">
    <div class="col-md-12" style="border:1px solid red">
      <strong>LHS DIV</strong> This is a div which can have a dynamic Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore esse quae quis eaque ab? Magnam tenetur id ducimus laudantium, optio quisquam eos ut dolorum sunt iure deserunt deleniti
      delectus voluptatibus.
    </div>


  </div>
  <div class="row mx-0">
    <div class="col-md-9 d-md-none">
    </div>
    <div class="col-md-12 rhs-div "><strong>RHS div</strong></div>
  </div>
</div>