Alignment of elements in html and css

Question

good afternoon people, sorry to bother you, but I need help to do an alignment I’m not getting. I’m formatting an element that looks like a table, has the days of the week to the left and the times to the right. But I’m not being able to align the schedules correctly. I added part of the html and css code that I’m having problems. And I’m going to put up the images of expectancy and reality. I apologize for the possible mistakes you will find in these codes, but I am working hard to learn and improve. Thank you from now on.

How I want it to stay:

As it is in reality:

CSS code

.banner3{
    background-color: #2b4c99;
    flex: 1;
}
.banner_title{
    font-size: 21px;
}

HTML code

<div class="banner3">
                        <div class="banner_title">
                            Opening Hours
                        </div>

                        <div>
                            Monday - Friday  <span>08:00am - 05:00pm</span>
                        </div>

                        <div>
                            Saturday <span>08:00am - 05:00pm</span>
                        </div>

                        <div>
                            Sunday   <span>08:00am - 05:00pm</span>
                        </div>
</div>

Answer 1

Use flex same, only that in divs with the times, and to put each text on one side use the property justify-content: space-between; I recommend that you take a Flex course, on Youtube you can find for free! ;)

.banner3{
    background-color: #2b4c99;
    flex: 1;
}
.banner_title{
    font-size: 21px;
}

.banner3 .card{
    display:flex;
    justify-content: space-between;
}

<div class="banner3">
                        <div class="banner_title">
                            Opening Hours
                        </div>
                        
                     
                        <div class="card">
                            Monday - Friday  <span>08:00am - 05:00pm</span>
                        </div>

                        <div class="card">
                            Saturday <span>08:00am - 05:00pm</span>
                        </div>

                        <div class="card">
                            Sunday   <span>08:00am - 05:00pm</span>
                        </div>
                    
</div>