I would like to place two containers next to each other. I want to have as less CSS as possible and therefor inherited most of the CSS to both containers. I moved the second one to the right by overwriting the absolute positioning left.
But why does the second container move down as well?
#blopWrapper {
position: absolute;
height: 88vh;
width: 100%;
}
.buttonDemo, .buttonStart {
width: 8%;
height: 6%;
position: relative;
left: 20%;
top: 30%;
background: #CFCFCF;
font-family: 'Varela Round', sans-serif;
font-weight: bold;
font-size: 10px;
color: #280D83;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
}
.buttonStart {
color: #FFF;
background: #230979;
left: 30%;
}<html><body><div id="blopWrapper"><div class="buttonDemo"><p>2</p></div><div class="buttonStart"><p>1</p></div></div></body></html>