2 floated divs and a svg-line in a wrapper. make the svg-line as high as wrapper

Question

I want to make a 2column design where a svg line is in between the 2 columns. This works if the parent div (in my example .wrapper) has a fixed height. But the content in .left and .right is dynamic and so is their height.

Here is my example:
https://jsfiddle.net/zo4qastn/1/

At first I thought the problem is the same as "how to make both divs 100% of wrappers height" (and I did not found a good solution). And I still think it has something to do with it, but the other strange thing with this svg-element is, that it has a height of 150px and I don't know where this is coming from.
Edit Default size of svg-element is 300x150. So it comes to: "how to make both divs 100% of wrappers height"

Same fiddle with .left bigger: https://jsfiddle.net/zo4qastn/5/
Is it possible with css to make the svg-line as high as the highest column?

Here is the code from fiddle:

<div class="wrapper">
  <div class="left">
      BIG <br> BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>
  </div>
  <svg class="line" width="10px" height="100%">
            <line x1="50%" x2="50%" y1="0%" y2="100%" stroke="#BBBBBB" stroke-width="2" stroke-linecap="round" stroke-dasharray="1, 10"/>
    </svg>
  <div class="right">
    small
  </div>
</div>

.left, .right {
  float: left;
  border: 1px solid black;
  width: 48%;
  width: calc( 50% - 5px );
  box-sizing: border-box;

  height: 100%;
}

.line {
  float: left;
}

.wrapper {
  border: 1px solid red;
}

.wrapper:after {
  display: table;
  content: " ";
  clear: both;
}

Answer 1

As @DaniP suggested I did it with display:table-cell:

Here the Fiddle

Or check this snippet:

.left,
.right {
  border: 1px solid black;
  width: 48%;
  width: calc(50% - 5px);
  box-sizing: border-box;
  display: table-cell;
  vertical-align: top;
  height: 100%;
}
.linewrap {
  display: table-cell;
  height: 100%;
  width: 10px;
}
.wrapper {
  border: 1px solid red;
  display: table;
  width: 100%;
}

<div class="wrapper">
  <div class="left">
      BIG <br> BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>BIG <br>
  </div>
  <div class="linewrap">
    <svg class="line" width="10px" height="100%">
        <line x1="50%" x2="50%" y1="0%" y2="100%" stroke="#BBBBBB" stroke-width="2" stroke-linecap="round" stroke-dasharray="1, 10"/>
    </svg>
  </div>
  <div class="right">
    small
  </div>
</div>

---

A downside is, the svg line is still at least 150px high. That is no problem for me, as the content will always be higher then 150px: https://jsfiddle.net/zo4qastn/7/