[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
  

[CSS] Keeping DIVs Side by Side

Problems
Making DIVs left and right side by side with the same height is a "always wants to accomplished" task, having the same height of 2 divs ensure the best alignment and appearances upon designing our UI.


Solutions
First we set the outer div to display: flex, and the inner 2 divs to flex: 1, the purpose is to told the browser that 2 child DIVs are of the same proportion. 

And that's it ! Now no matter what content is in the 2 DIVs, they will always share the same height

References
- https://stackoverflow.com/questions/2997767/how-do-i-keep-two-side-by-side-divs-the-same-height