Field alignment issue

I would like 3 fields next to each other:

CITY, STATE and ZIP

I would like STATE and ZIP to be fixed width and aligned with the right side of the page, with the CITY field expanding and contracting with page resizes (filling 100% of the space between itself and STATE).

I've played around with various HorizonalLayout's, using in combination and I come close to getting it right, but it's just not working.  While I can get the CITY field to expand and contract, there's a huge gap between it and STATE.  I got STATE and ZIP to align with the right side however.

CITY                                               STATE   ZIP
[  < -- expand and contract w/ page resizes --> ] [     ] [    ]
                                                                                     <-- move left and right
                                                      w/ page resize -->

When I expand the browser window, an ever increasing gap forms between CITY and STATE.

I have the following setting on my CITY field:

city.setWidth("100%");

And the layout code is this:

HorizontalLayout horzStateZip = new HorizontalLayout(state, zipCode);
        horzStateZip.setSpacing(true);
        
        HorizontalLayout horzCity = new HorizontalLayout(city);
        horzCity.setSpacing(true);
        horzCity.setWidth(100, Unit.PERCENTAGE);
        
        HorizontalLayout horzRow = new HorizontalLayout(horzCity, horzStateZip);
        horzRow.setSpacing(true);
        horzRow.setWidth(100, Unit.PERCENTAGE);
        horzRow.setComponentAlignment(horzStateZip, Alignment.MIDDLE_RIGHT);
        
        this.setContent(horzRow);

Jonas Ohlsson: Try something like this:
HorzontalLayout h = new HorizontalLayout(city,state,zip);
h.setWidth("100%");
h.setExpandRatio(city,1);
setContent(h);

 

You nailed it.  Thank you.