How can I position the second element in a series of four as a sidebar?

Issue

How can I place the divs in a specific place within the container without changing the HTML?

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
  <div class="item item4">Item 4</div>
</div>

Here is a diagram of the layout I'm trying to achieve:

Solution

You can use CSS Grid to achieve this:

.container {
  display: grid;
  grid-template-rows: 50% 50%; /* sets up 2 rows, equal height */
  grid-template-columns: 25% 50% 25%; /* sets the columns to equal 100% */
  grid-template-areas: "a b c" "a d c"; /* creates specific "areas" to assign the divs to */
}

.item1 {
  grid-area: b;
  background: red;
}

.item2 {
  grid-area: a;
  background: blue;
}

.item3 {
  grid-area: d;
  background: purple;
}

.item4 {
  grid-area: c;
  background: yellow;
}

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
  <div class="item item4">Item 4</div>
</div>

Here's a little less "fragile" version, to scale with content:

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  /* sets ups two rows, each one will take the space it needs */
  grid-template-columns: 25% 1fr 25%;
  /* sets the columns to equal 100% */
}

.item1 {
  grid-column: 2;
  grid-row: 1;
  background: red;
}

.item2 {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: blue;
}

.item3 {
  grid-column: 2;
  grid-row: 2;
  background: purple;
}

.item4 {
  grid-column: 3;
  grid-row: 1 / span 2;
  background: yellow;
}

<div class="container">
  <div class="item item1">Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
  <div class="item item4">Item 4</div>
</div>

If you need a gap in between elements:

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  /* sets ups two rows, each one will take the space it needs */
  grid-template-columns: 25% 1fr 25%;
  /* sets the columns to equal 100% - the 1fr means 1 unit of remaining space. */
  gap: 10px;
  /* adds a gap between all elements. The 1fr for the column is important here as gap is ADDED to percentages, so the remaining width for the middle column is a little less than 50%  */
}

.item1 {
  grid-column: 2;
  grid-row: 1;
  background: red;
}

.item2 {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: blue;
}

.item3 {
  grid-column: 2;
  grid-row: 2;
  background: purple;
}

.item4 {
  grid-column: 3;
  grid-row: 1 / span 2;
  background: yellow;
}

<div class="container">
  <div class="item item1">Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
  <div class="item item4">Item 4</div>
</div>

Answered By - disinfor