There is a parent div (green in the figure) and there are two independent div-blocks with text and other elements inside (red in the figure).

The left has little text, and the second has a lot.

It is required that the elements on the left are always in the middle relative to the elements on the right, as in this figure:

_{(source: joxi.ru )}

I know that for this Word how to use vertical-align: middle, but the result is not what you need. It turns out identical as if I wrote bottom.

Answer 1

You do not quite understand how it works and, most importantly, how does not work vertical-align . To achieve the desired result, you need to set display: table-cell; (and remove the float ) for the child divs

Related link: Understanding vertical-align

Answer 2, authority 100%

Option 1 display: inline-block; :

* {
 box-sizing: border-box;
}
.row {
 border: 2px solid green;
 padding: 5px;
}
.col {
 border: 2px solid tomato;
 display: inline-block;
 vertical-align: middle;
 width: 50%;
}
.col + .col {
 margin-left: -5px;
} 

& lt; div class = "row" & gt;
& lt; div class = "col" & gt;
  Lorem ipsum.
 & lt; / div & gt;
 & lt; div class = "col" & gt;
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, voluptas.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, voluptas.
 & lt; / div & gt;
& lt; / div & gt;