bootstrap grid with border between columns

Question

How can i make a bootstrap grid with one row and inside that 2 columns. First column size 9 col-md-9 and the second size 3 col-md-3 that no matter how long the content will be inside the columns the row and columns will be nice and border between them. How can I do it? It should look like this:

Not like this:

Here is a jsfiddle

.row > div {
  background: lightgrey;
  border: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <div class="col-xs-9">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
 
  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>

Answer 1

An universal solution would be to use flexbox.

This will allow your columns to have always equal height.

Here is a fiddle: https://jsfiddle.net/Gt25L/1280/
(I supposed you'd have to add specific class, because rows and cols are too general, but I believe you got the point)

.row {
  display: flex;
}

.row > div {
  flex: 1;
  background: lightgrey;
  border: 1px solid grey;
}

<div class='row'>
  <div class="col-xs-9">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
 
  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>