is there a way to display this div next to the one before instead of below it?-CodePudding

I've been trying to put the 3rd container in the free space on the right, like covering the whole height of 1st and 2nd container but fitting right in the free space of their width, and i haven't achieved it yet. Here is the code so maybe you could help me:

.container {
  background-color: rgb(181, 233, 138);
  height: 50vh;
  width: 50vw;
}

* {
  padding: 0;
  margin: 0;
}

.container2 {
  background-color: rgb(2, 159, 243);
  height: 50vh;
  width: 50vw;
}

.container3 {
  background-color: rgb(23, 223, 133);
  height: 100vh;
  width: 50vw;
}

<section id="only">
  <div ></div>
  <div ></div>
  <div ></div>
</section>

CodePudding user response：

Use a proper CSS grid for the task:

* {
  padding: 0;
  margin: 0;
}

#only {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100vh;
}

.container {
  background-color: rgb(181, 233, 138);
  grid-column: 1;
}

.container2 {
  background-color: rgb(2, 159, 243);
  grid-column: 1;
  grid-row: 2;
}

.container3 {
  background-color: rgb(23, 223, 133);
  grid-column: 2;
  grid-row: 1 / 3;
}

<section id="only">
  <div ></div>
  <div ></div>
  <div ></div>
</section>

Find a complete guide to CSS grid here. MDN also has excellent information on CSS grid.