how can I make elements justify-content-between

Question

I want to separate between two elements one most right and the other most left I try to use justify-content-between but doesn't work I don't know why

HTML

<div class="post-left d-sm-flex justify-content-between">
    <ul>
        <li>
            <div class="post-author">
                <div class="avatar avatar-online avatar-xs">
                    <a href="doctor-profile.html"><img src="assets/img/doctors/doctor-thumb-01.jpg" class="avatar-img rounded-circle" alt="Post Author">
                        <span>username</span></a>
                </div>
            </div>
        </li>
        <li class="h4 "><i class="fas fa-money-bill-alt money"></i>400 $</li>                                                       
    </ul>
</div>

style

.post-left ul {

    list-style: none;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: inherit;
}

.post-left ul li {
    color: #15558d ;
    margin-bottom: 5px;
    margin-left: 10px;
    
}

Answer 1

You can just add justify-content: space-between; to the .post-left ul , as below :

 .post-left ul { . . . justify-content: space-between; }