Q:

Flex items with right aligned static items on first row

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>

A:

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>

