I'm trying to do this layout:

alt text

The point is that the controls are vertically fixed in height, but some on the left have an arbitrary height control associated with them. I do this: first, there is a panel with display: block elements (vertical), inside I put a horizontal one into which I place a block with a fixed height and an arbitrary one. I tried to set the vertical-align: middle , but then this "line" becomes high and the distance between the main controls increases. How to avoid it?

    2 answers 2

    Imposed table: demo | source

     table { vertical-align: middle; } tr {} td { height: 5em; } td > span { background: black; color: white; width: 125px; display: block; text-align: center; } td > span.fixed-h { height: 25px; } td > span.adaptive-h { height: 3.3em; } 
     <table> <tr> <td> <span class="fixed-h">FIXED</span> </td> <td> <span class="adaptive-h">ADAPTIVE</span> </td> </tr> <tr> <td> <span class="fixed-h">FIXED</span> </td> </tr> <tr> <td> <span class="fixed-h">FIXED</span> </td> <td> <span class="adaptive-h">ADAPTIVE</span> </td> </tr> <tr> <td> <span class="fixed-h">FIXED</span> </td> </tr> </table>

    Py.Sy.: The CSS property "vertical-align: middle" works only with "display: table-cell" (default for all table cells).

      Set a fixed line-height and use inline-block .