what is the best way to flex align two items right and one left

Issue

This image given below is the result I am looking for.

I have the html as follows

    <div class="container">
      <div class="content1">1</div>
      <div class="content2">2</div>
      <div class="content3">3</div>
    </div>
               

here container is set to display: flex I wanted to align the divs as follows. I can give justify-content: space-between but how to align the centre div closer to 3 with 10px distance from it.

I have several containers which is aligned row by row. So, in the end, it should look like this as image shown below.

I have given margin-left to div 2 but it doesn't order correctly with different div having different width.

Solution

You can add another div around the 2 on the right, and then use margin to create space around all of the div's

.container{
display:flex;
justify-content: space-between;
background: grey;
width: 400px;
height: 400px;
}
.content1,
.content2,
.content3{
background: green;
width: 50px;
height: 50px;
margin: 10px;
}
.align{
display:flex;
}

<div class="container">
      <div class="content1">1</div>
      <div class="align">
        <div class="content2">2</div>
        <div class="content3">3</div>
      <div>
    </div>

Answered By - Ramon de Vries