[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