בעברית זה אומר כך:
את הinput והlabel נניח בתוך אזור(div) שהמיקום שלו הוא יחסי לעצמו (realetive)
הinput ראשון ואחריו הlabel
לlabel ניתן מיקום מקובע יחסי להורה האב הראשון שהוא יחסי לעצמו (בעצם זה האב הראשון שקבענו אותו realetive)
בשלב זה, הlabel נצמד לעליון שמאל של הdiv האב,
בגלל שבהיררכיה הlabel בה אחרי הinput יש לתת לו z-index של -1 כדי שהinput יכסה אותו.
עכשיו נדחוף אותו באופן כזה שיהיה מוסתר בטוח מאחורי הinput ע"י שימוש בtop וב left.
עכשיו ניצור שינוי במקרה ויש פיקוס על הinput שישנה את הסטייל של הlabel הבא אחריו בשימוש עם הסלקטור הבא:

input:focus ~label{
//הסטייל כאן
}

באותו עיצוב נגדיר שהפונט יקטן מעט, וכמו כן יזו מעט למקום שנרצה ביחס למקומו כרגע, ע"י:

transform: translateY(-24px) translateX(-12px);

או בקיצור:

transform: translate(-24px, -12px);

שים לב שlabel בא אחרי הinput ומתחתיו (ברירת המחדל בדפדפן שהוא בא על יד הinput).

הנה הדוגמא כמו במה שהראת רק בCSS

    .search-wrapper {
      position: relative;
      top: 20px;
    }

והכל על מקומו יבוא בשלום

    label {
      position: absolute;
      ...
      top: 8px;
      left: 12px;
      z-index: -1;
      transition: .15s all ease-in-out;
    }
    input {
      transition: .15s all ease-in-out;
      ...
      &:focus {
        ...
        transform: scale(1.05);
        & + label  {
          ...
          transform: translateY(-24px) translateX(-12px);
        }
      }
    }