【HTML-CSS】div中加入icon后input标签占用不满问题

做登录表单时遇到了一个宽度控制不好的问题，放入图标后，input框总是无法正确的填满剩余空间（尺寸过大/过小）
原因是input元素和父元素div宽度都写死的问题

把父元素的高度删除，宽度改成max-content
删除子元素的padding
父元素的空间由子元素input撑起，即可正确的撑满空间

将图标宽度固定大功告成

以下是表单部分代码，图标部分使用Awesome

form>div{
            width: max-content;
            margin: 10px auto;
            border: 1px solid #ccc;
            line-height: 30px;
        }
        form>div>i{
            width: 16px;
            margin-left: 5px;
            margin-right: 5px;
        }
        form>div>input{
            padding: 0;
            height: 30px;
            width: 230px;
            vertical-align: top;
            border: none;
            background-color: #bfc;
        }

<i class="fab fa-twitter fa-4x brid"></i>
        <div id="title">Twitter</div>
        <div id="sectitle">Fake Message Commuity</div>
        <form action="">
            <div><i class="fas fa-mail-bulk"></i><input type="address" name="" placeholder=邮箱 id="" ></div>
            <div><i class="fas fa-lock"></i><input  type="password" name="" placeholder=邮箱 id="" ></div>
        </form>