Css 垂直对齐在div中不起作用

我正试图将文本框切换到按钮，但我的案例第一行是文本框，然后是按钮中的下一行 html:-

试试这些款式

#surnamediv {
   display: flex;
   align-items: center;
}
#surnamediv label {
    margin-left: 10px;
}

#姓div{
显示器：flex；
对齐项目：居中；
}
#姓氏标签{
左边距：10px；
}

添加
姓

使用flex垂直对齐作业

.样式化输入{
宽度：100℅;
显示器：flex；
对齐项目：居中；
}

#姓div{
显示：表格；
}
#姓div输入，
#姓div按钮，
#姓氏标签{
显示：表格单元格；
垂直对齐：中间对齐；
}
#姓氏标签{
左侧填充：10px；
}

添加
姓

这里甚至没有问题。发生了什么，你期望发生什么？复制品在哪里？只有一行是给我的。你能不能在小提琴上复制它，这样我就可以研究它了这里没有叫做“.custominput”的css类。你是说“风格化输入”吗？@NanditaAroraSharma谢谢夫人

.custom-input #surnamediv #add{
        vertical-align:middle;
    }

#surnamediv {
   display: flex;
   align-items: center;
}
#surnamediv label {
    margin-left: 10px;
}

<style>
    .styled-input {
    width:100℅;
    display:flex;
    align-items:center;
    }
</style>