How to set a step for dynamic size of an eöement in CSS?

50 Views Asked by At

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".

enter image description here

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)?

0

There are 0 best solutions below