How to get equal height columns when one column is split into two rows within Bootstrap3

Question

I need a BOOTSTRAP 3 grid layout as above which is simply two columns and the first column is split into two rows. Col1 will hold some text, lists in each of the rows and Col2 will hold an image. The columns need to be equal height - I can’t achieve the equal heights.

I am using this css which works perfectly in other areas to achieve the equal heights of columns, but those columns have not been split into rows.

.row{
    overflow: hidden; 
}

[class*="col-md"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

I have tried using table-cells, and using max/min heights, but nothing is consistent.

How can I achieve equal height columns when one of the columns is split into rows in Bootstrap 3 grid?

Fiddle

Thank you in advance.

Answer 1

why not grid?

POC:

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 1fr 1fr;
  margin: 10px;
  border: solid 1px;
  width: 200px;
}

.item1,
.item2,
.item3 {
  border: solid 1px;
  padding: 10px;
}

.item1 {
  grid-row: 1 / 2;
}

.item2 {
  grid-row: 2 / 3;
}

.item3 {
  grid-row: 1 / 3;
}

<div class="container">
  <div class="item1">item 1</div>
  <div class="item2">item 2</div>
  <div class="item3">item 3</div>

</div>

smart layouts with grid are very easy.

more info: https://css-tricks.com/snippets/css/complete-guide-grid/