Квадрат CSS по высоте

Можно ли сделать квадрат div с помощью css на основе высоты в пикселях?

Этот вопрос похож на этот (помечен как дубликат), но в этом случае я хочу установить высоту в пикселе или любой единице.

При использовании ширины существует простое решение:

.mydiv {
    height: 0;
    padding-bottom: 100%;
}

Но здесь 'height следует за шириной'. Я ищу решение, где 'width соответствует высоте'. Поэтому, если бы я установил height в 300px, width последует за ним.

Теперь я делаю это с помощью javascript, обновляя при изменении размера окна. Но я хотел бы найти решение для CSS, вот почему Я не ищу javascript-решение

Вот игровая площадка