How to create a responsive circle with two lines of text in HTML and CSS?

body {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}

.circle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #333;
color: #fff;
font-size: 32px;
font-weight: 600;
border-radius: 50%;
padding: 20px;
aspect-ratio: 1 / 1;
}


2
AP


200,000
AP







Why is the aspect-ratio CSS property not working here? When the text inside is long enough (like if I use 200,000 instead of 2, it is a square aspect ratio perfect circle). But I need it to work when the text is short too.


I want to avoid Javascript and hardcoding any widths or heights, because the circle should be fully responsive to the text inside of it, and be the minimum size required to display it (while also being a square aspect ratio).