Flex items with right aligned static items on first row - css

Question

I want to use flex to make a responsive section with static items aligned right on first row. The static items will occupy variable space on the first row (the static items will be different size in different layout thus it is variable space), the other items should avoid overlap the static items and auto wrap to second row when first row do not have enough space.
Expected result:
Screen width: 768px
|---------------------------------------------------------------------|
|[Item 1] [Item 2] [Item 3] [Static Item 1] [Static Item 2]|
|---------------------------------------------------------------------|
Screen Width: 320px
|-------------------------------------------|
|[Item 1] [Static Item 1] [Static Item 2]|
|[Item 2] [Item 3] |
|-------------------------------------------|
I tried following code but the static item cannot cannot keep at first line
.flex {
display: flex;
border: 1px solid black;
flex-wrap: wrap;
}
.item {
display: inline-flex;
border: 1px solid blue;
margin: 5px;
white-space: nowrap;
}
.static {
margin-left: auto;
flex-wrap: nowrap;
display: inline-flex;
}
<div class="flex">
<div class="item">Dynamic Item 1</div>
<div class="item">Dynamic Item 2</div>
<div class="item">Dynamic Item 3</div>
<div class="static">
<div class="item">Static Item 1</div>
<div class="item">Static Item 2</div>
</div>
</div>

Answer 1

I have idea with float and use with inline-block if you didn't want flex style
Main factor is...
display:inline-block on item
float:right on static item
In this example you can resized div box to test responsive ; )
.container{
display:block;
border: 2px solid;
resize: both;
overflow: auto;
background-color: yellow;
}
.item{
display:inline-block;
background-color: blue;
margin: 10px 10px;
}
.item.static{
float:right;
}
<div class="container">
<div class="item static">item5</div>
<div class="item static">item4</div>
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>

Answer 2

You could try to combine a flexbox with two inline-flexboxes. The outer flexbox will align both boxes inside to the edges. On smaller screens only the first one will wrap.
.wrapper {
display: flex;
justify-content: space-between;
}
.item {
display: inline-flex;
}
.static-items {
display: inline-flex;
justify-content: flex-end;
flex-wrap: nowrap;
}
.item {
width: 100px;
height: 20px;
margin: 2px;
background-color: orange;
}
<div class="wrapper">
<div class="items">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
</div>
<div class="static-items">
<div class="item">
Static Item 1
</div>
<div class="item">
Static Item 2
</div>
</div>
</div>
<br/>

Answer 3

Try this
<section class="row">
<section class="group">
<item1 />
<item2 />
<item3 />
</section>
<section class="group">
<item4 />
<item5 />
</section>
</section>
CSS
.row{
display: flex;
justify-content: space-between
}