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...