css - position div's on oppersite sides of container-CodePudding

I have a stackblitz here

Super simple but I'm stuck

I have a div container containing 6 divs

I need the position the red div on the right of the container but still keep the layout of the divs.

If I try position: absolute; right: 0; or float: right;

all the div's collapse on top of each other.

How can I position the even divs on the right and keep the structure

* {
  font-family: sans-serif;
}

.wrap {
  border: 1px solid grey;
  position: relative;
  width: 400px;
}

.wrap div:nth-child(even) {
  background: red;
  /* position: absolute;
  right: 0; */
  /* float: right; */
}

.block {
  background: #aaa;
  width: 200px;
  padding: 10px;
  margin-bottom: 5px;
  color: white;
}

CodePudding user response：

Using flexbox and the align-self property, you can achieve this goal. Here's a fork of your stackblitz with the fix.

I added display: flex to the parent, flex-direction: column to keep your design, and simply align-self: flex-end on one of the child that has to be on the right.

Hope it help, good luck !

CodePudding user response：

Like this

.block.two {
  position: relative;
  left: 100%;
  transform: translateX(-100%);
}

https://react-ts-h2pzuh.stackblitz.io/