Justify div text using flexbox

Question

I'm trying to justify some text in a div and no matter what I do, I can't seem to get it to where I want. All of the resources I've looked at on using flexbox suggest that my code is right, but clearly it isn't. I've created a Fiddle of my current code.

.job-description {
  display: flex;
  justify-content: space-between;
}

<div class="job-description">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut velit massa, condimentum consectetur quam vel, dictum ullamcorper nulla. Maecenas ac sem hendrerit, finibus nibh vitae, aliquet est. Aliquam consequat ultricies turpis sit amet pulvinar. Aenean
    commodo consectetur sapien eu rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
  </p>
</div>

Answer 1

This seems a conceptual confusion.

The justify-content property aligns flex items along the main axis of the current line of the flex container.

However, you don't want to justify your flex item. Instead, you want to justify the text inside it. So the right way to justify it is using Text properties, not Flexbox ones. Specifically, there is text-align:

This property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box.

So you add text-align: justify to your flex item. Or if you prefer, to the flex container, and let the flex item inherit it.

Answer 2

Just use text-align: justify

CSS

.job-description {
    display: flex;
    justify-content: space-between;
}

.job-description p{
    text-align: justify;
}

DEMO HERE