common problems in nested `div` elements

The following are some kinds of problems encountered when nesting divs:

absolute position a `div` while respecting the padding of its container

solution: use a wrapper div as shown in this playground project.

different border thickness in `div` elements that are horizontally align using `display: inline-block`

Use vertical-align: top

This is exemplified in this SO question of mine and also in this playground project.