[{"data":1,"prerenderedAt":111},["ShallowReactive",2],{"/2025/09/20-putting-2-html-elements-side-by-side":3},{"id":4,"title":5,"body":6,"date":102,"description":44,"extension":103,"meta":104,"navigation":105,"path":106,"robots":107,"seo":108,"stem":109,"__hash__":110},"posts/2025/09/20 putting-2-HTML-elements-side-by-side.md","20 Putting 2 HTML Elements Side By Side",{"type":7,"value":8,"toc":99},"minimark",[9,18,25,28,31,45,48,51,59,62,70,73,81,84,86,89,91,94,96],[10,11,13],"post-title",{":date":12},"date",[14,15,17],"h1",{"id":16},"putting-2-html-elements-side-by-side","Putting 2 HTML Elements Side by Side",[19,20,21],"notes",{},[22,23,24],"p",{},"This is a repost from my old blog. First posted in 10/24/2016.",[26,27],"br",{},[22,29,30],{},"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:",[32,33,34],"code-block",{},[35,36,41],"pre",{"className":37,"code":39,"language":40},[38],"language-text","\u003Cdiv class=\"Container\">\n   \u003Cdiv class=\"LeftColumn\">\u003C/div>\n   \u003Cdiv class=\"RightColumn\">\u003C/div>\n\u003C/div>\n","text",[42,43,39],"code",{"__ignoreMap":44},"",[22,46,47],{},"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.",[22,49,50],{},"Option 1:",[32,52,53],{},[35,54,57],{"className":55,"code":56,"language":40},[38],".LeftColumn, .RightColumn {\n   display:inline-block;\n   width: 50%;\n}\n",[42,58,56],{"__ignoreMap":44},[22,60,61],{},"Option 2:",[32,63,64],{},[35,65,68],{"className":66,"code":67,"language":40},[38],".LeftColumn {\n   float: left;\n}\n.RightColumn {\n   float: right;\n}\n",[42,69,67],{"__ignoreMap":44},[22,71,72],{},"Option 3:",[32,74,75],{},[35,76,79],{"className":77,"code":78,"language":40},[38],".Container { display: flex; flex-direction: row; justify-content: space-between; }\n",[42,80,78],{"__ignoreMap":44},[22,82,83],{},"Each option has its own characteristics.",[22,85,50],{},[22,87,88],{},"It will create a gap between the two elements.\nIf browser is shrinked width-wise, the second element will not be automatically wrapped.",[22,90,61],{},[22,92,93],{},"The first element will be anchored to the left and the second element will be anchored to the right.\nTo prevent the next element from being rendered unexpected, a third element with css property of clear: both is needed.\nIf browser is shrinked width-wise, the second element will be placed underneath the first.\nvertical-align property and some other properties have no effect.",[22,95,72],{},[22,97,98],{},"Same points as option 2 but without the need of the third element.\nNew CSS 3 properties but it has more ways for customization.",{"title":44,"searchDepth":100,"depth":100,"links":101},2,[],"2025-09-20T00:00:00.000Z","md",{},true,"/2025/09/20-putting-2-html-elements-side-by-side",null,{"title":5,"description":44},"2025/09/20 putting-2-HTML-elements-side-by-side","bi8u961hDlCLHezLhPGHgyQtqPC3cMWs7O7fBwvgPl8",1785167453125]