How to make this div full auto size?

I am trying to make a restaurant menu but I can't figure out how to do it I want to make the div named "menu-spacer" the maximum size it could get.

With the "min-width" and "max-width" it only takes the minimum width.

Render screenshot:

<div class="wrapper container w-50">
                <div class="wrapper menu block">
                    <div class="menu-content">Un menu tout à fait normal</div>
                    <div class="menu-spacer"></div>
                </div>
                <div class="price block">50€</div>
            </div>
            <div class="wrapper container w-50">
                <div class="wrapper menu block">
                    <div class="menu-content">Un menu</div>
                    <div class="menu-spacer"></div>
                </div>
                <div class="price block">50€</div>
            </div>

    .wrapper {
        display: flex;
    }

    .menu-content{
        width: ;
    }

    .menu-spacer{
        width: max-content;
        border-bottom: green 2px dotted;
    }

    .menu {
        width: 80%;
        text-align: left;
        color: black;
        padding-bottom: 0px;
    }

    .price {
        width: min-content;
        text-align: right;
        color: black;
    }