Css 将提交与表单上输入按钮的底部边框对齐

我在研究这个网页

我试图重新创建表单输入按钮。该页面上的修复程序正在使用

*, *:before, *:after{
    box-sizing: inherit;
}

我在我的页面上尝试了一下，但我想不出解决办法

HTML:

---

您的样式表不像引用的网站那样设置

*{box size:inherit；}

。你只是将它设置为*：before和*：after伪元素你是对的，但它仍然没有改变任何东西，idk如果使用了其他一些我无法确定的技巧。。。也许这与每个输入和提交按钮都在一个div中有关，但是嵌套太多了，谁知道呢。。。

<form action="">
   <input type="text" name="firstname" value="First Name">
   <input type="text" name="email" value="Email">
   <input type="submit" value="Get Started today">
</form>

*{
    margin: 0;
    padding: 0;
}

form{
    margin-top: 30px;
}

form input{
    border: none;
    outline: none;
    border-bottom: 10px solid black;
    padding: 5px;
    margin: 0 20px 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    height: 60px;
}


input[type="submit"]{
    border: none;
    outline: none;
    color: white;
    background-color: black;
    height: 60px;
    padding: 0 20px;
    box-shadow: 5px 10px 30px 3px rgba(0, 0, 0, 0.25);
}

*:before, *:after{
    box-sizing: inherit;
}