<div id='demo'>
  <input id='demo-input' type="text" placeholder='name'>
  <label id='demo-label'>Name</label>
</div>

#demo
  width 90%
  max-width 450px
  position relative
#demo-input
  width 100%
  height 60px
  line-height @height
  font-size 20px
  border-bottom 1px solid orange
  &::placeholder 
    font-size 0
  &:focus+label
  &:not(:placeholder-shown)+label
    top 0
    font-size 12px
#demo-label
  font-size 22px
  color orange
  position absolute
  left 0
  top 50%
  transform translateY(-50%)
  transition all .3s


/*
* Default
*/
body
  height 100vh
  display flex
  div
    margin auto
    input
      border 0
      outline 0

// https://yogwang.site/2019/CSS-placeholder-shown/