content justification not working as expected

Using tailwind.
I’d like item 1, item 2 to start from left of screen item 3 to start from right of screen. I’m seemingly lost trying to self-answer the following questions:

1. does flex class need to be explicitly specified in child components? Shouldn’t, but flex-row doesn’t work without flex added in.
2. why isn’t item 3 moved to the right? If all inner divs are removed and justify done on parent it works as expected.

Playground: https://play.tailwindcss.com/AwJKkx66oW

Snippet:

<div class="flex p-3 bg-gray-600 text-white">
  <!-- left side -->
  <div class="flex flex-row justify-start ">
    <div class="pr-4">Item 1</div>
    <div class="pr-4">Item 2</div>
  </div>
  <!-- right side -->
  <div class="flex flex-row justify-end">
    <div>Item 3</div>
  </div>
</div>

>Solution :

if your two container have the same size justify-start and justify-end will all item will be align without separation

the idea to have a next item after a certain element align at the end is :

• have a flex container
• have margin left-auto on item that should be at the end (you can play with nth-child(3)

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}

p {
  margin: 3px;
  height: 75px;
  width: 75px;
  background: red;
}

p:nth-child(3) {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>