CSS responsive square (height: width;)

.suqare {
    width: 50%;
    height: 0;
    padding-bottom: 50%;
}

This will result in a square of 50% height and 50% width.

EDIT:
Unfortunately i didn't found a solution for the other way. (width: height;) If anyone knows a way to do this, pls give me a link or short description. Thank you!