How to place a vertical line within the panel class?

Question

Follows code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title pull-left">
            Works fine for me!
        </div>
        <div class="panel-title pull-right">Text on the right</div>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-6 pull-left">Coluna Esquerda</div>
            <div class="col-md-6 text-right">Coluna Direita</div>
        </div>
    </div>
</div>

I want to put some forms to right and left. For this I need to put a vertical line in the middle. Any solution ?

Answer 1

You can put a border on any of the blocks, just left or right, depending on the block you choose.

For example:

.pull-left{border-right:1px solid cor;}

Have to remember that you put col-md, so when you get to the corresponding maxwidth, you need to remove the border so that the 2 blocks don’t look different when they get 100%.