Css flex - one item on the right, the other centered on the left space

I'm new to css and even newer to flex. I couldn't find an answer, so I started a new one.. I have the following container and item:

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

  .item {
    color: rgb(51, 51, 51);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

This way I get 2 items on both sides (one left and one right). I would like to know how to do the following:

1. The left item, will be on the left as before. From the point it ends, to the point the container ends - I with the right element to be centered.
2. The left item, will be on the left as before. The right item will be 10px left from the right end of the container.

Thanks!