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;