I am currently having an issue of getting two `<div>`s side by side to match the `height` exactly. The reason I need them both to be the same `height` is because the right `<div>` contains a `class` that applies a `left-vertical border` to it that we need to see without interruption. If the left `<div>` expands vertically, but the right one doesn't, we have a `vertical border` that does not run the length of the vertical gap in between the rows of the `<div>`s. 

We have tried a number of solutions, one of them using `display: table`, `display: table-row`, and `display: table-cell`. You can see that configuration below.

[JSFiddle #1 of the issue](https://jsfiddle.net/alexfwilson/0qu89wje/2/)

Our main concern is keeping the `vertical border` running continuously so that we are not left with gaps, as seen in the image. [Vertical Gap Image](https://i.stack.imgur.com/Wczdh.png)

We also thought about setting a `background color` equal to the `vertical border` color and basically creating the `border` with a `margin`.

Our entire document above this is laid out in a mostly similar fashion, being created in `CSS` and without any tables. We are hoping to find a solution here that does not require a major rewrite.

Thank you!

**Relevant code**

```
.column2,
.column3 {
  float: left;
  margin-bottom: 30px;
}

.column2 {
  width: 45%;
  margin-bottom: 0 !important;
  padding-top: 3px;
  padding-bottom: 3px;
}

.column3 {
  width: 30.7%;
}

.column2,
.column3 {
  min-width: 190px;
  padding-left: 20px;
}

.column2:first-of-type,
.column3:first-of-type {
  padding-left: 0;
}

.left-vertical-border {
  border-left: 1px solid #BFB9B9;
  height: 100%;
}

.table-wrapper {
  display: table;
  padding-left: 20px;
  width: 100%;
}

.table-row-wrapper {
  display: table-row;
}

.table-cell {
  display: table-cell; 
}
<div class="table-wrapper">
  <div class="table-row-wrapper">
    <div class="column2 table-cell">question text</div>
    <div style="display: table-cell;" class="column2 left-vertical-border">textanswer text answer</div>
  </div>
</div>    
    <div class="table-wrapper">
  <div class="table-row-wrapper">
    <div class="column2 table-cell">question textquestion textquestion textquestion textquestion textquestion textquestion textquestion text</div>
    <div class="column2 left-vertical-border table-cell">textanswer text answer</div>
  </div>
</div>

<div class="table-wrapper">
  <div class="table-row-wrapper">
    <div class="column2 table-cell">question text</div>
    <div class="column2 left-vertical-border table-cell">textanswer text answer</div>
  </div>
</div>

```