Simple code to display elements side by side via display: flex and display: grid in CSS. DEMO Flex Left Right Grid Left Right HTML < h2 > Flex </ h2 > < div class = "container-box flex-box" > < article >< span > Left </ span ></ article > < article class = "gold-color" >< span > Right </ span ></ article > </ div > < h2 > Grid </ h2 > < div class = "container-box grid-box" > < article >< span > Left </ span ></ article > < article class = "gold-color" >< span > Right </ span ></ article > </ div > CSS . container - box article {background: lightblue;} . container - box article span {display: block; padding: 0.5 em;} . container - box article . gold - color {background: gold;} . flex - box {display: flex;} . flex - box article {width: 50 % ;} . grid - bo...