tl;dr: I want the four squares to foat to the top of the page like the green Element.
I have 2 Elements, that I want to get next to eachother (#sidebar and #board-wrapper). But the second element always appears below the first, even though it is set to inline-block. It has something to do with the grid in the second element, because the first always reaches down to the first row of the grid, but I have no clue why it is doing that. I rebuild the code to make it easier to see:
<html>
<style>
#sidebar {
display: inline-block;
height: 200px;
width:20px;
border: solid;
background-color: green;
}
#board-wrapper{
display:inline-block;
border:dashed;
}
#board {
display:grid;
grid-template-columns: repeat(2,56px);
grid-template-rows: repeat(2,56px);
margin:5px;
}
.card {
border:solid;
width:50px;
height:50px;
}
</style>
<body>
<div id = "sidebar"></div>
<div id = "board-wrapper">
<div id = "board">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
</body>
</html>
update: I just wanted to put names on the elements to make it easier so put text into the divs. And this is what happened?!