How can I add vertical spacing between elements in aon mobile view?

Currently, I have a <div> that is responsive.

Wide screen display:

Mobile display:

How can I add vertical spacing between the 2 rows on the mobile display? I have tried adding a margin to each of the elements, however, I do not want the second row to have a margin-bottom.

My code is as follows:

HTML

<div class="stats-flexwrap">      <div class="stats">          <span class="stats-row"><span>element 1</span>          <span class="stats-row"><span>element 2</span>          <span class="stats-row"><span>element 3</span>          <span class="stats-row"><span>element 4</span>       </div>   </div>  

CSS

.stats-row {      text-align: center;      margin: 0 16px;  }    .stats {      width: auto;      display: flex;  }    @media screen and (max-width: 788px) {      .stats {          flex-wrap: wrap;          justify-content: center;          max-width: 100%;          margin: 0;          height: auto;      }            .stats-row {          margin: 0 16px 0 16px !important;          width: 120px;      }  }    .stats-flexwrap {      display: flex;      flex-wrap: wrap;      justify-content: space-around;  }  

https://stackoverflow.com/questions/65535788/how-can-i-add-vertical-spacing-between-elements-in-a-div-on-mobile-view January 02, 2021 at 11:29AM