Text resizes span/div no matter what


I have two items on a grid thus far, and they work fine… except for their size. it seems the length of the item’s description changes the span’s size even when it doesn’t need to, it shrinks the other span beside it as well which is even uglier taking into account that the descriptions are randomized.

Below is my code except the IDs and classes, etc are changed.


<div id="shop">
    <span id="buyRedBall" class="shopItem">
        <h3>Red Ball</h3>
        <p id="boughtRedBalls" class="boughtRedBalls">Bought: 1</p>
        <span id="redBallDescription1" class="description">I love balls!</span>
<!--the above is a small description, and below is a longer one that increases width even tho there is plenty of space-->
        <span id="redBallDescription2" class="description">do you love balls?!</span>
        <p id="redBallCost" class="redBallCost">Cost: $2</p>
        <button onClick="buy(1)" class="btn">Buy</button>


#buyRedBall {
    margin: auto;
    grid-row: 1;
    grid-column: 1; 
    border: dotted 0.2em;
    border-color: var(--red);
    text-align: center;
    max-width: 50%; /*this and the two below are also attempted solutions, but to no avail.*/
    min-width: 50%;
    overflow-wrap: break-word;

.description {
    color: var(--dim);
    overflow-wrap: break-word; 

thanks in advance!

I have decided to add the css for the shop as well:

#shop {
    display: grid;
    grid-gap: 2em;
    background-color: var(--bg1);
    border: solid;
    border-color: var(--fg1);
    border-radius: 0.5em;

    padding: 1em;
    margin: auto;
    width: 80%;