Why does the shape of a div changes when I put text in it?

.grid {
background-color: green;
width: 10%;
padding-top: 10%;
border-radius: 20%;
}

the grid has a square shape, but when I put text in it, it changes to a rectangular shape, any idea?