Conceptually, how would I approach creating this image in react (text alignment)

Question

I'm currently building a recipe and meal planning app for a personal project and I'm struggling on converting this image into react. Sectioning and spacing specifically. How should I approach the sectioning? I currently have it is that the meals, days of the week, and "breakfast lunch dinner" will have their own divs. Is this the best way of going about it or is there a more effective way?

What i want: https://i.sstatic.net/Eb5zL.jpg

What I have: https://i.sstatic.net/nSXZR.jpg

I created some test cards and gave them this css

.mealplancard{ 
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    flex-wrap:wrap;
    margin: 20px;
    border: 1px solid black; /*so I can see  where the div starts and ends*/
    border-radius: 25px;
    width: 66%;
    float: right;
  }

Width 66% allows me to have cards per row which is what I need for my meals. My second question is how do I align the Days of the week column to line up evenly with each row of food? Since I'm struggling with divs I'm not sure how to go about this. All relavant code is attached below. I am also getting my recipe info from an API.

const MealPlanCard = ({title, calories, image, ingredients}) => {

    const round = Math.round(calories);
        
    return(

        <div className>
            
            <div className= "row">
                <div className = "card">
                        <img className = {style.image} src={image} alt=""/> 
                        <h1 >{title}</h1>
                    </div>
                
                <div className = "column">
                    <div className = "card">
                        <img className = {style.image} src={image} alt=""/> 
                        <h1 >{title}</h1>
                    </div>
                </div>
                <div className = "card">
                        <img className = {style.image} src={image} alt=""/> 
                        <h1 >{title}</h1>
                    </div>
                    <div className = "card">
                        <img className = {style.image} src={image} alt=""/> 
                        <h1 >{title}</h1>
                    </div>    

                    <div className = "card">
                        <img className = {style.image} src={image} alt=""/> 
                        <h1 >{title}</h1>
                    </div>   

                    <div className = "card">
                        <img className = {style.image} src={image} alt=""/> 
                        <h1 >{title}</h1>
                    </div>   

                    <div className = "card">
                        <img className = {style.image} src={image} alt=""/> 
                        <h1 >{title}</h1>
                    </div>   

                    <div className = "card">
                        <img className = {style.image} src={image} alt=""/> 
                        <h1 >{title}</h1>
                    </div>   

                    <div className = "card">
                        <img className = {style.image} src={image} alt=""/> 
                        <h1 >{title}</h1>
                    </div>   


            </div>
        </div>
        )

    }




    return(
            <div className = "App">
                <NavigationBar></NavigationBar>


                <div className = {style.mealplantext}>
                    <h1>monday</h1>
                    <h1>tuesday</h1>
                    <h1>wednesday</h1>
                </div>




                <div className = {style.mealplancard}>
                    {recipes.slice(0, 1).map(recipe =>(
                        <MealPlanCard 
                        key={recipe.recipe.label}
                        title ={recipe.recipe.label} 
                        calories={recipe.recipe.calories}
                        image={recipe.recipe.image}
                        ingredients={recipe.recipe.ingredients}
                        />
                    ))}
             </div>
                 

Edit: Bolded the actual questions for clarity

Answer 1

If you wish to make the Monday, Tuesday, etc at the same line with the menu(s), you should put them in the same row.

Basically You should put them in this kind of structure:

row
|
+-- col
|   |
|   +-- h1 (the day)
|
+--col
   |
   +--row
       |
       +--col
       |  |
       |  +-- card
       |
       +--col
          |
          +-- card

Here is an example built with boostrap and simple HTML/CSS/JS for it:

.row {
    display: flex;
    align-items: center; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col day"><b>Monday</b></div>
  <div class="col">
    <div class="row">
      <div class="col">
        <div class="card">
          <img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/coffee_terrine-0c48191.jpg?quality=90&resize=500%2C454" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Pudding</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>