Created by: Bamieh
Issue
Placing two inline-blocked divs next to each other will cause the second div to align in the middle of the first one, resulting in a step-like alignment of divs.
Reason
The next div in the inline-block'ed elements will inherit the vertical-align of the div previous to it, which is usually middle. resulting in this step-like alignment.
Solution
Adding "text-top" to the .d-inline-block class will solve this issue, as all divs placed by each other will take from this inline-block.
Side note
Although this issue is usually avoided by using bootstrap's grid system, sometimes developers need to place two elements next to each other without the grid system (or inside it) hence this will solve a kind of mysterious behavior for most developers.