Flex Flexbox, Push right, Align Left and different widths

Question

left side Easy, is done.

but what about right section RESPONSIVE PUSHED right but align left, small box included.. see the image:

Any flexbox easy idea?

Answer 1

Try this:

.container {
  display: flex;
  justify-content: space-between;
}

.container > div {
  display: flex;
  flex-direction: column;
}

.right {
  align-items: flex-start;
}

.left {
  align-items: flex-end;
}

.box {
  height: 40px;
  width: 100px;
  border: 1px solid blue;
  margin-bottom: 5px;
}

.wide {
  width: 200px;
}

<div class="container">
  <div class="left">
    <div class="box wide"></div>
    <div class="box"></div>
  </div>

  <div class="right">
    <div class="box wide"></div>
    <div class="box"></div>
  </div>
</div>