Why is the Relative Sibling div not in the same line as Sibling div. But Adding position: relative and top: 50px to the relative class moves the Relative Sibling to the same line as Sibling. If I remove the br tag the Parent moves down to the same line as Sibling line but Relative sibling is still not in the same line.
* {
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
font-weight: bold;
font-size: 14pt;
}
.bordered {
border: 2px solid #2e3d49;
}
.parent {
height: 100%;
background-color: #dbe2e8;
padding: 8px;
}
.light-olive {
background-color: #DFDFD1;
}
.relative {
/* position: relative; */
top: 50px;
}
.sibling {
display: inline-block;
background-color: #15C26B;
width: 150px;
height: 100px;
}
.child {
background-color: #ffae0c;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Relative Flow Quiz</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<meta name="udacity-grader" content="tests.json">
</head>
<body>
<div class="parent">Parent<br>
<div class="sibling bordered">Sibling</div>
<div class="sibling relative bordered">Relative Sibling
<div class="child bordered">Child</div>
<div class="child bordered">Child</div>
</div>
<div class="sibling bordered">Sibling</div>
</div>
<span class="light-olive">
Sibling to the parent
</span>
</body>
</html>
