How can I put the horizontal line between the two columns in a Bootstrap row?

Question

I want to have a horizontal line between the two columns of bootstrap . I have tried a lot but i did not get any solution for it . I want it as below :

[  Col 1    ]     [  Col 2        ]     [  Col 3        ]
[           ]     [               ]     [               ]
[           ]     [               ]     [               ]
[ Content   ]-----[   Content     ]-----[    Content    ]    ---->This is the horizontal line .
[           ]     [               ]     [               ]
[           ]     [               ]     [               ]

I want the horizontal line as above between the columns of bootstrap . I am working on React ,my code is below :

<Wrapper2>
        <div >
            <div className="row">
                <div className="col-md-4 col-sm-12">
                   Col 1
                </div>
                <div className="col-md-4 col-sm-12">
                    Col 2
                </div>
                <div className="col-md-4 col-sm-12">
                    Col 3
                </div>
            </div>
        </div>
    </Wrapper2>

Any help regarding this will be helpful for me .

Answer 1

.container
{
padding:10px;
position:relative;
}

.col-12{
border:1px solid;
}

.col-4::after {
    border-bottom: 2px solid red;
    width:15px;
    position: absolute;
    content: "";
    right:-8px;
    top:50%;

}

.col-4:last-child::after {
display:none;
}

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

<div class="container">
  <div class="row vertical-line">
    <div class="col-4">
     <div class="col-12">
       01
     </div>
    </div>
 <div class="col-4">
     <div class="col-12">
       02
     </div>
    </div>
   <div class="col-4">
     <div class="col-12">
       03
     </div>
    </div>
  </div>
</div>

I hope this will lead you to your output

Answer 2

Check this link

https://codesandbox.io/s/gifted-sid-rp6bs

I made an example to show you how it is done. You can add an hr inside the div with position: absolute and declare the parent div as position: relative and then you can position it wherever you want inside the div.

I also put the height of the columns to be 100px in order to show you the result.