Untitled

react component: 
 
<div className={styles.MobileAdditionalLinks}>
  <KatButton variant="tertiary" className={styles.Button}>
    <div className={styles.ButtonContent}>
      <span className={styles.Text}>Unfinished listing drafts</span>
      <KatBadge className={styles.Badge} label="16" type="default" />
      <KatIcon className={styles.ChevronIcon} name="chevron-right" size="medium" />
    </div>
  </KatButton>
  <KatButton variant="tertiary" className={styles.Button}>
    <div className={styles.ButtonContent}>
      <span className={styles.Text}>Manage your selling applications</span>
      <KatIcon className={styles.ChevronIcon} name="chevron-right" size="medium" />
    </div>
  </KatButton>
</div>
 
 
css:
 
.MobileAdditionalLinks {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spsx-space-03);
    padding-top: var(--spsx-space-11);
 
    .Button {
        --border-color: #e3eced;
        height: 44px;
 
        .ButtonContent {
            display: flex;
            flex-direction: row;
            width: 100%;
 
            .Text {
                flex: 1;
                align-items: flex-start;
            }
 
            .Badge {
                align-items: flex-end
            }
 
            .ChevronIcon {
                align-items: flex-end;
            }
        }
    }
}