Sidebar isn't positioning correctly

Question

Im creating a simple website but Im having trouble positioning the sidebar correctly. It should be on the right side of the content but it keeps being put below the content.

* {
  font-family: verdana;
  background-color: lightgray;
}

p {
  font-size: 2vh;
}

.logo {
  padding-left: 3vw;
}

.navbar {
  background-color: #383838;
  width: 100vw;
  height: 7vh;
}

.navbar a {
  font-size: 5vh;
  text-decoration: none;
  background-color: #383838;
  color: white;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 0.75vh;
  border-right: 0.2vw solid white;
}

.content {
  width: 70vw;
  height: 80vh;
  background-color: white;
  padding-top: 0.5vh;
  margin-left: 0;
}

.content h1,
.content p {
  background-color: white;
  color: black;
  margin-left: 3vw;
  margin-right: 3vw;
}

.sidebar {
  background-color: orange;
  width: 10vw;
  height: 80vh;
}

<h1 class="logo">Logo</h1>

<div class="navbar">
  <a href="www.google.com">Home</a>
  <a href="www.google.com">Produkte</a>
  <a href="www.google.com">Ueber mich</a>
</div>

<div class="content">
  <h1>Inhalt</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

<div class="sidebar"></div>

The text is in german which shouldn't make a difference. Also ".sidebar" is the sidebar and it should be positioned on the right side of ".content".

Answer 1

Unless you specify a display property, div by default will have display: block; which stacks divs one on top of another.

One solution is to create a wrapper div with display: flex

* {
  font-family: verdana;
  background-color: lightgray;
}

p {
  font-size: 2vh;
}

.logo {
  padding-left: 3vw;
}

.navbar {
  background-color: #383838;
  width: 100vw;
  height: 7vh;
}

.navbar a {
  font-size: 5vh;
  text-decoration: none;
  background-color: #383838;
  color: white;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 0.75vh;
  border-right: 0.2vw solid white;
}

.content-outer {
  display: flex;
}

.content {
  width: 70vw;
  height: 80vh;
  background-color: white;
  padding-top: 0.5vh;
  margin-left: 0;
}

.content h1,
.content p {
  background-color: white;
  color: black;
  margin-left: 3vw;
  margin-right: 3vw;
}

.sidebar {
  background-color: orange;
  width: 10vw;
  height: 80vh;
}

<h1 class="logo">Logo</h1>

<div class="navbar">
  <a href="www.google.com">Home</a>
  <a href="www.google.com">Produkte</a>
  <a href="www.google.com">Ueber mich</a>
</div>

<div class="content-outer">
  <div class="content">
    <h1>Inhalt</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>

  <div class="sidebar"></div>
</div>