There is a tabular block within which data from the database is filled.

How can I make the data fill in each row 2 columns of the same height, that is, if the neighboring block is larger in height, the other one is adjusted to it?

Here is the picture:

Description of how it should look

I know that you can achieve such a result with the help of display: table and display: table-cell and on the basis of this I registered the following properties:

 .content-table { display: table; width: 100%; } .content-table-cell { display: table-cell; width: 50%; vertical-aling: top; }

But as I understand it is not correct, since it generates everything in one line ..

How come How to solve this problem? It is necessary to have 2 blocks on each line and preferably the same height, since using the bootstrap col-md-6 blocks the height and the content can jump from place to place ...

    1 answer 1

    Instead of a table, you can use a simple block:

     .content-table { display: block; width: 100%; }

    And a table cell inline-block , and for height alignment use height

     .content-table-cell { display: inline-block; width: 45%; /* 50% */ float: left; height: 120px; /*Для выравнивания высоты у каждого блока*/ }
    • Now I will try - E1mir
    • I forgot to say that I need the same height for each element depending on the line, that is, so that the content does not jump) here he jumps .. - E1mir
    • one
      so add to .content-table-cell {height: 400px} if the solution helped put it as the right answer so that other people wouldn’t ask it again and could get acquainted with the ready answer - bm-9
    • Earned! Complete the answer with this I will accept it :) I know that I need to accept the answer) - E1mir
    • yes accepted your change - bm-9