CSS responsive squares with text centered below each square in a row

Question

I have some responsive gradient squares with centered text below each of them but when I use display: flex to put them in a row they disappear and all I can see is the text side by side. I only added 2 responsive squares in this code snippet, originally it would have been 4 responsive squares but I guess it's to much code. Anyway any help will be highly appreciated, Thank You !. Here's my code snippet without display: flex --

HTML

<section class="icons">
            <div class="iconWrapper">
                <a href="/Send/send.html">
                    <div id="send"></div>
                </a> 
                <span>Send</span>
                <a href="/Recieve/receive.html">
                    <div id="receive"></div>
                </a>
                <span>Receive</span>
            </div>
        </section>

CSS

.icons {
    background-color: blue;
    width: 100%;
    height: 20%;
    justify-content: space-between;

}


.iconWrapper {
    padding-top: 25px;
    padding-left: 10px;
    background: rgb(0, 0, 0);
    box-sizing: border-box;
    resize: horizontal;
    border: 1px dashed;
    overflow: visible;
    max-width: 20%;
    height: calc(22vh - 16px);
    text-align: center;
    font-size: 5vw;
    color: whitesmoke;
    font-family: Roboto;
}

#send {
    width: 100%;
    padding-bottom: 100%;
    margin-bottom: 15%;
    border-radius: 13px;
    background-image: linear-gradient(to bottom right, rgb(93, 35, 255) 25%, rgb(45, 255, 220));
}


#receive {
    width: 100%;
    padding-bottom: 100%;
    margin-bottom: 15%;
    border-radius: 13px;
    background-image: linear-gradient(to bottom right, rgb(93, 35, 255) 25%, rgb(45, 255, 220));
}

Answer 1

If I understand correctly this is what you are looking for. I made it for 4 objects, you can change it by changing calc(25%... to lets say 33% if you want 3 objects in a row, but don't forget to also change padding-bottom accordingly.

.icons {
        width: 100%;
      }
      .iconWrapper {
        width: 100%;
        display: flex;
        gap: 15px;
      }

      .send-receive {
        display: block;
        flex: 1 0 calc(25% - 15px);
        position: relative;
        padding-bottom: 25%;
        margin-bottom: 15%;
        border-radius: 13px;
        background-image: linear-gradient(
          to bottom right,
          rgb(93, 35, 255) 25%,
          rgb(45, 255, 220)
        );
      }

      .send-receive span {
        display: block;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
      }

 <section class="icons">
      <div class="iconWrapper">
        <a class="send-receive" href="/Send/send.html">
          <div id="send"></div>
          <span>Send</span>
        </a>

        <a class="send-receive" href="/Recieve/receive.html">
          <div id="receive"></div>
          <span>Receive</span>
        </a>
        <a class="send-receive" href="/Send/send.html">
          <div id="send"></div>
          <span>Send</span>
        </a>

        <a class="send-receive" href="/Recieve/receive.html">
          <div id="receive"></div>
          <span>Receive</span>
        </a>
      </div>
    </section>