How to make two columns the same height in bootstrap?

Question

css

It is necessary to make 2 columns of the same height in the bootstrap.
The right side will be the text, and the left side will be the table of contents with vertical-align: middle.

I tried to add another class to ROW:

.n-cols {
  display: table;
}

and columns respectively:

.n-cols > div {
  display: table-cell;
  vertical-align: middle;
}

but the column with the table of contents stubbornly does not want to gain height more than the height of the content inside.
UPD
It turns out float: right (which is given to bootstrap columns) and display: table-cell don't work together! If I set the columns to float:none, the alignment works as in the picture, but the bootstrap grid refuses to work in this area..
How to solve the problem?

Answer 1

Have you tried adding a custom column style? With indication of height.

Answer 2

try custom style

Answer 3

in your css via media for smaller extensions where you don't need the same height undo table-cell and float or write display:inline-block for these blocks; vertical-align:middle; and these blocks will be centered relative to each other