How to compare css width of two divs in React JS using Cypress?

I have 2 divs on my UI, the width of which needs to be same for a Cypress scenario to PASS.

I know how to match the width to a static value, for example...

cy.get('[aria-label="div1"]').should('have.css', 'width', '150px');
cy.get('[aria-label="div2"]').should('have.css', 'width', '150px');

However, I want to compare the width of div1 and div2 and ensure they are same - since it need not always be 150px.

How can I achieve that ?

You can do something like this:

cy.get('[aria-label="div1"]')
  .invoke('css', 'width')
  .then((width1) => {
    cy.get('[aria-label="div2"]')
      .invoke('css', 'width')
      .then((width2) => {
        expect(width1).to.equal(width2)
      })
  })

You can also select both together and compare in a function,

  cy.get('[aria-label^="div"]')
    .should($els => {
      expect($els[0].style.width).to.eq($els[1].style.width)
    })