UI Holy Grails part 1 - how to set two controls in one line

Everyone, who at least once was making an UI for the web application, met this problem: how to center vertically two controls, which are in one container side by side? One of them is higher, the second one lower, and when you finally set them up correctly – the div below the container double its height! Arrrrrgh! Chill out, deep breath and continue reading this post.
Imagine you have simple div with two controls: label and input like below.

    

First name:
        
    

You want label and input to be side by side with the vertical center on the same line. Nothing simpler, isn’t it? In fact … no! In simple web applications with very small, simple CSS usually there are no problems with correct position of the controls, but when there are many style sheets, which are overwriting each other classes, then the problem with the proper location is quite common. Sometimes it is very hard to determine where is the CSS line that causes the problem is.
To fix that problem you should firstly use F12 tools to find which line in which CSS is responsible for incorrect position of the controls and then you can start customization of the CSS. On the list below I have gathered, basing on my experience, some ideas which may help you in resolving of this problem. Some of them are very simple, but I was trying to make a compilation of ideas that I have seen during last 3 years.

• Set up vertical-align value to “middle”. It seems to be obvious, but sometimes, especially when you were using some upper (or lower) index, the value of this align might be different.
• Take a look into the height of the container which contains our two controls. Maybe it has correct setting, but our two controls are too short. In this case try to set the height property of our two problematic controls to 100%. Sometimes filling of the container height with the controls can help, especially when the container has correct settings. Remember to check the max-height and min-height properties of the container and the controls.
• Very popular, but not easy to use with other elements in complicated structure of HTML tags (e.g. ASPX webpage) is line-height. This property changes the height of a line (“row”) which contains the given control. Sometimes it occurs that the line-height of the controls differs between each other, so it is better to set for them the same value and remember to check the line-height of the container itself. The next thing to remember is to test if the line-height did not impact other controls on the website.
• In some cases, a good solution is to check if there are some paddings or margins added to our problematic controls itself. Changing of the padding and margin values might be helpful, especially when the controls inherits the values from the container.
• The last solution, which is strange but sometimes helpful is using of the float property with the value “right” or “left”. “Float” removes the control from the normal object constructions. It means that some of the properties are being turned off, when we decide to use float: left or float:right. In some cases using of this property will not fix the problem, but it will give clue where you should be looking for the problem. It might occur, that the e.g. the margin, absolute position or left / right property is a problem.

If you have more ideas for resolving this problem share it in a comment.