Left border for dynamic div - html

Question

I am struggling to get full length left border vertically on a div.
Problem is that i can not fix the height of div as content is loaded dynamically and it can be short and long.
I tried below approach:
Approach 1
CSS
div.right-col {
position: relative;
}
div.right-col:before {
content:"";
background: #ccc;
padding-left:2.5rem;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 1px;
}
HTML
<div class="left-col"></div>
<div class="right-col"></div>
Approach 2
CSS
.right-col {
position: relative;
}
#borderLeft {
border-left: 2px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}
HTML
<div class="left-col"></div>
<div class="right-col"><div id="border-left"></div></div>
Approach 3
CSS
.left-col {display:table-cell}
.right-col {
display:table-cell;
border-left: 1px solid #ccc;
padding-left: 2.5rem;
float: none;
height:auto;
}
HTML
<div class="left-col"></div>
<div class="right-col"></div>
But none of above things are working. Border is only till where content is present.

Answer 1

Is someting like that what you are looking for ?
<div>
<div style="height:100%;display:inline-block;background-color:#FF0000;">LEFT</div>
<div style="height:100%;display:inline-block;background-color:#0000FF;">RIGHT</div>
</div>
Otherwise, it may be easier to use bootstrap and the row & col-xx class.

Answer 2

Html
<div class="main">
<div class="left-col">sdfsdfsdf</div>
<div class="right-col">sdfsdfsdf
<br>
sdfsdfsdf
</div>
</div>
Css
.left-col {display:table-cell; width:100%; background-color: red;}
.right-col {
display:table-cell;
border-left: 1px solid #ccc;
padding-left: 2.5rem;
float: none;
height:auto;
background-color: green;
}
.main{
display:table;
}
Demo

Answer 3

This is sometimes referred to as the Holy Grail Problem and there are a number of hacks for it. However the first 'real' fix i believe is the flexbox. Here is how i would solve your problem:
Fiddle
HTML
<div class="container">
<div class="col left">Hi</br>Let's see how this works.</div>
<div class="col right">Hi</div>
</div>
CSS
.container, .col {
display:flex;
}
.container {
flex:1;
flex-direction:row;
}
.col {
flex-direction:column;
}
.col.right {
border-left: 1px solid black;
}
.col.left {
order:-1;
}