I have a form, that has optically two sides (left and right). The height of the input fields is constant, so the left and the right fields are placed exactly on the same "lines".
Now I want to add description/comment blocks under some of the fields. The "lines" may not be broken. It's no problem for short comment, that need only one "line". I can simply set the min-height
to the height of the input fields. But longer texts will need multiple line breaks and so destroy my imaginary "lines".
So what I need, is a way to define something like a "step" for the comment blocks. so that if a comment block contains multiple lines of text, it grows by one or more heights
(e.g.: the height
is 20px
; then the block can become greater to contain more text, but only in 20px
steps like 40
, 60
80
, etc.).
How to do this with pure CSS (without JavaScript)?