positon:absoluteのときに、横幅可変の要素を作る

absoluteがきいているときでも、可変の要素を作りたい
transformとcalcを使う

SCSS

.text {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 29px; //文字中央寄せのため
  border: 1px solid white;
  border-radius: 5px;
  position: absolute;
  bottom: 14px;
  left: 50%; //要素を左半分に寄せる
  transform: translateX(-50%); //寄せた位置から、要素の中心を50%右に寄せる
  width: calc(100% - 16px);
  height: 29px;
}