Flex-start and flex-end in one line

For the main axis, and with the default flex direction row, you should use the new auto margins, e.g. margin-left: auto.

Edit: And it appears that react now also support auto-margins: github-link

body > div {
  display: flex;
  border: 1px solid red;
}
div div {
  padding: 10px;
  background: lightgray;
}
div div:nth-child(3) {
  margin-left: auto;
}

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

And like this for the cross axis, using the align-* properties, e.g. align-self.

body > div {
  display: flex;
  border: 1px solid red;
  align-items: flex-start;
  height: 100px;
}
div div {
  padding: 10px;
  background: lightgray;
}
div div:nth-child(3),
div div:nth-child(4) {
  align-self: flex-end;
}

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Use a separator element to split:

.container {
    display: flex;
    flex-direction: row;
}
.item {
    display: flex;
    flex-shrink: 0;
}
.divider {
    display: flex;
    flex: 1;
}

<div class=container>
    <div class=item>
        <div>Left One</div>
    </div>
    <div class=divider></div>
    <div class=item>
        <div>Right One</div>
    </div>
</div>

Please avoid using margin: auto to flex boxes. This may not be supported by some native solutions such as react native.