Side by side divs not matching height

Question

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

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

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>

Answer 1

Flexbox is a pretty robust solution for this, gets rid of a bunch of funny markup, too. It accomplishes what you want thanks to align-items: stretch being the default which causes items in the same row to be the same height (the height of the tallest item)

* { box-sizing: border-box; }

.question-wrap {
  display: flex;
  flex-flow: row wrap;
  padding: 0 10px;
}

.question {
  flex: 0 0 45%;
}

.answer {
  flex: 0 0 55%;
  border-left: 1px solid #BFB9B9;
}

.question,
.answer { padding: 10px; }

<div class="question-wrap">
    <div class="question">question text</div>
    <div class="answer">textanswer text answer</div>

    <div class="question">question textquestion textquestion textquestion textquestion textquestion textquestion textquestion text</div>
    <div class="answer">textanswer text answer</div>

    <div class="question">question text</div>
    <div class="answer">textanswer text answer</div>
 
    <div class="question">question text</div>
    <div class="answer">textanswer text answer</div>

    <div class="question">question textquestion textquestion textquestion textquestion textquestion textquestion textquestion text</div>
    <div class="answer">textanswer text answer</div>

    <div class="question">question text</div>
    <div class="answer">textanswer text answer</div>

    <div class="question">question text</div>
    <div class="answer">textanswer text answer extra long right hand side to show that the vertical border sticks</div>
  </div>

Answer 2

Getting rid of the float seems to fix the issue.

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