Delivering pin

<style>
    .pin-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding: 10px 0;
      font-family: sans-serif;
    }
  
    .pin-left {
      color: #83878a;
      font-size: 16px;
      flex: 1;
      min-width: 150px;
    }
  
    .pin-right {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
      min-width: 200px;
    }
  
    .pin-right span {
      font-size: 16px;
    }
  
    .pin-right .label {
      color: #02b7c2;
    }
  
    .pin-right .value {
      font-weight: bold;
      color: #000;
    }
  
    .pin-right .edit-icon {
      width: 24px;
      height: 24px;
      /* border: 1px solid #02b7c2; */
      /* border-radius: 50%; */
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .pin-right .edit-icon img {
      width: 24px;
      height: 24px;
    }
  
    @media screen and (max-width: 600px) {
      .pin-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
  
      .pin-right {
        justify-content: flex-start;
      }
    }
  </style>
  
  <div class="pin-wrapper">
    <div class="pin-left">Availability & Expiry</div>
    <div class="pin-right">
      <span class="label">Delivering To</span>
      <span class="value">110002</span>
      <div class="edit-icon">
        <img src="https://www.netmeds.com/assets/version1741756829/gloryweb/images/icons/pinEdit.svg" alt="Edit">
      </div>
    </div>
  </div>