Align one element of a container at the top left corner and the other at the bottom right using flexbox?

The element in the image is styled using absolute positioning but when I resize the screen I have to slightly adjust the positioning of both the ‘For Sale’ element and the ‘$400,000’ element so I am curious as to if there is a way to achieve the same layout using flexbox?

Here is my attempt (https://codepen.io/ob98/pen/eYVPJLJ)

<div class = 'container'>
  <p class='item1'>Top Left</p>
  <p class='item2'>Bottom Right</p>
</div>

css:

.container{
  display: flex;
  
  background: red;
  width: 500px;
  height: 200px;
  color: white;
}

.item1{
  align-self: flex-start;
}

.item2{
  align-self: flex-end;
  justify-self: flex-end; /* If align-self moved this to the bottom  of the container vertically, I am thinking that this should move it to the end/right side of the container horizontally, but that is not working  */
}

Just went to https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self and saw that "In flexbox layouts, this property is ignored (more about alignment in Flexbox)", so I guess that explains why that is not working but I don’t really understand why this property is being ignored… Anyway, is there a way to achieve this layout using flexbox or do I have to stick to absolute positioning? Thanks for any input.

>Solution :

Add to .container the declaration justify-content: space-between, to make both your p go to the container edges, and that’s done!

.container {
  display: flex;
  justify-content: space-between;
  background: red;
  width: 500px;
  height: 200px;
  color: white;
}

.item1 {
  align-self: flex-start;
}

.item2 {
  align-self: flex-end;
  justify-self: flex-end;
}

<div class = 'container'>
  <p class='item1'>Top Left</p>
  <p class='item2'>Bottom Right</p>
</div>