How to put two elements next to each other?

Question

I'm trying to put two divs next to each other, but either the one that's supposed to be on the right is showing up below the left one, or they are next to each other, but they're no longer anywhere near the left edge, which is where the left one is supposed to be.

Here is my HTML.

 .maincontent { background-color: white; opacity: 0.8; height: 400px; width: 400px; font-family: 'Arvo'; border: 1px solid black; font-size: 20px; margin-top: 0; display: inline-block; float: left; position: relative; }.sidebar { background-color: #242424; opacity: 0.8; margin-top: 10px; width: 50px; padding-left: 10px; padding-right: 50px; height: 210px; border-radius: 25px; padding-top: 10px; left: 10px; position: sticky; top: 0; }.linkinsidebar { text-decoration: none; color: white; font-family: 'Arvo'; font-size: 20px; }

 <div class="sidebar"> <h3 style="font-family:'Arvo';">Jump</h3> <a class="linkinsidebar" href="#info">Info</a> <a class="linkinsidebar" href="#quiz">Quiz</a> <a class="linkinsidebar" href="#gallery">Gallery</a> <a class="linkinsidebar" href="#top">Top</a> </div> <div class="maincontent"> <p class="pmaincontent"> <a id="info">Placeholder text</a> </p> </div>

Here is what the code looks like.

Answer 1

In CSS, you need to add float left and float right in sidebar and maincontent class. In addition, the HTML snippet contains a body tag in the middle of two divs. It's wrong.

 .maincontent { background-color: white; opacity: 0.8; height: 400px; width: 400px; font-family: 'Arvo'; border: 1px solid black; font-size: 20px; margin-top: 0; display: inline-block; float: left; position: relative; }.sidebar { background-color: #242424; opacity: 0.8; margin-top: 10px; width: 50px; padding-left: 10px; padding-right: 50px; height: 210px; border-radius: 25px; padding-top: 10px; left: 10px; position: sticky; float:left; top: 0; }.linkinsidebar { text-decoration: none; color: white; font-family: 'Arvo'; font-size: 20px; }

 <div class="sidebar"> <h3 style="font-family:'Arvo';">Jump</h3> <a class="linkinsidebar" href="#info">Info</a> <a class="linkinsidebar" href="#quiz">Quiz</a> <a class="linkinsidebar" href="#gallery">Gallery</a> <a class="linkinsidebar" href="#top">Top</a> </div> <div class="maincontent"> <p class="pmaincontent"> <a id="info"></a> Placeholder text </p> </div>