I am facing an issue with two sibling divs nested inside a parent div as shown below:
<div class="row filters-box">
<div class='col-md-1'>
<div class="title"><label class="filter-title">Filter</label></div>
</div>
<div class='col-md-9'>
<div class="column-left pull-left">
....
The first div with class col-md-1
is styled with a border-right of 1px solid black;
.
However, the second div with class col-md-9
sometimes spans across two rows depending on its content.
Even when I try setting the height to 100% like this:
<div class="col-md-1" style="height:100%">
, it does not span those two rows.
https://i.sstatic.net/FKVXI.png
I need help in figuring out how to ensure that the border spans across these two rows without specifying a fixed height in pixels?