[HTML&CSS] Vertical align 2 elements

Background

Very often we want to align 2 DIVs vertically and middle aligned with each other, like image and div, or 2 DIVs.

How

1. Declare the css "display: flex" or "display: inline-flex" at the parent container with "align-items: center"
2. Put the items we want to align inside the parent container

Quoting from stackoverflow's answer

References

• css: vertical-align image with text inside span
  
• https://wcc723.github.io/css/2017/07/21/css-flex
• A Complete Guide to Flexbox