Cộng đồng Hỏi & Đáp của Inflearn

<template>
  <div class="inputBox shadow">
    <input type="text" v-model="newTodoItem">
    <span class="addContainer" @click="addTodo">
      <i class="fa-solid fa-plus addBtn"></i>
    </span>
  </div>
</template>

<style scoped>
input:focus {
    outline: none;
  }
  .inputBox {
    background: white;
    height: 50px;
    line-height: 50px;
    border-radius: 5px;
  }
  .inputBox input {
    border-style: none;
    font-size: 0.9rem;
  }
  .addContainer {
    float: right;
    background: linear-gradient(to right, #6478FB, #8763F8);
    display: block;
    width: 3rem;
    border-radius: 0 5px 5px 0;
  }
  .addBtn {
    color: white;
    vertical-align: middle;
  }
</style>

위처럼 아예 input창 크기도 안맞춰지고 span 태그도 사라져있더라구요..

왜 이상하게 나왔는지를 몰라서 임시로 아래처럼 바꿨는데 요즘은 flex를 현업에 안쓴다고 들었는데 그게 맞을까요 ??

아직 git 허가를 못받아서 ..😭

input:focus {
    outline: none;
  }
  .inputBox {
    display: flex;
    align-items: center;
    background: white;
    height: 50px;
    line-height: 50px;
    border-radius: 5px;
  }
  .inputBox input {
    height: 100%;
    width: calc(100% - 3rem);
    border-style: none;
    font-size: 0.9rem;
  }
  .addContainer {
    background: linear-gradient(to right, #6478FB, #8763F8);
    display: block;
    height: 100%;
    width: 3rem;
    border-radius: 0 5px 5px 0;
  }
  .addBtn {
    color: white;
    vertical-align: middle;
  }