Putting 2 HTML Elements Side by Side
Many times I have to battle on which methods are the best in putting two HTML elements side-by-side. Let say we have the following elements:   <div class="Container">    <div class="LeftColumn"></div>    <div class="RightColumn"></div> </div>   Based on my own experience and preference, I usually use one of these 3 css options. For clarification, they are by no means comprehensive ways to style two elements nor the points are meant to capture all possibilities.   Option 1:  .LeftColumn, .RightColumn {    display:inline-block;    width: 50%; }    Option 2:  .LeftColumn {    float: left; } .RightColumn {    float: right; }    Option 3:  .Container {    display: flex;    flex-direction: row;    justify-content: space-between; }   Each option has its own characteristics.   Option 1:   It will create a gap between the two elements.  If browser is shrinked width-wise, the second element will not be automatically wrapped.     O...