How do you get element dimensions without callback/closure hell?

[trainbolt]

This is obviously not optimal.

it('scrolls rank table to view', () => {
  cy.get('.myEl').then($el => {
    const myElOffsetTop = $el.get(0).offsetTop;
    cy.get('header').then($el => {
      const headerOffsetHeight = $el.get(0).offsetHeight;
      cy.scrollTo(0, nyElOffsetTop - headerOffsetHeight - 10);

      // ... further test code ...
    });
  });
});

It would be nice to be able to get it more like:

it('scrolls rank table to view', () => {
  const myElOffsetTop = cy.get('.myEl').then($el => $el.get(0).offsetTop);
  const headerOffsetHeight = cy.get('header').then($el => $el.get(0).offsetHeight);
  cy.scrollTo(0, nyElOffsetTop - headerOffsetHeight - 10);
});

But of course, this does not work.

So... 1. How do you avoid the first code, and 2. Is it possible to have it more like the second code?

EDIT
Also, before someone might suggest... I can't simply scroll to the element because part of it will be hidden behind the header element.