<div class="container-fluid">
<div class="row">
<!-- Left side -->
<div class="col-xl-10 style">
<div class="row" >
<div class="col-xl-12 style">Box1</div>
</div>
<div class="row" >
<div class="col-xl-6 style">Box3</div>
<div class="col-xl-4 style">Box2</div>
<div class="col-xl-2 style">Box7</div>
</div>
<div class="row">
<div class="col-xl-3 style">Box4</div>
<div class="col-xl-9 style">Box5</div>
</div>
</div>
<!-- Right side -->
<div class="col-xl-2 style">Box 2 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem iure sed recusandae hic laborum, quae earum doloremque illo alias explicabo rerum sequi corrupti magnam, ipsam laudantium cupiditate! Necessitatibus, aliquam eaque?</div>
</div>
</div>
.style{
background-color: rgb(220, 222, 238);
border: 1px solid black;
}
i am looking to modify the layout to adjust the heights of boxes (1, 2, 3, 4, 5, 7). Specifically, box1 should take up half of the height occupied by box6, and the remaining two lines should evenly split between box3, box2, box7 and box4, box5 taking up 25% each.