Html 限制文本框中显示的行数，但不限制用户写入

我有个案子，我不知道该怎么办

我试图在文本框上放置一个按钮，以使我的布局看起来美观，但当用户开始在文本框中输入信息时，它会隐藏在按钮后面。我知道我有两种解决方案中的一种，但我不知道如何做到：

1-或者找到另一种方式进行布局

2-限制用户输入的行数，但这样我将限制长数据

下面是我的HTML和CSS：

正文{
背景：#000；
}
.nl main{
宽度：300px；
边框：1px纯白；
边界半径：6px；
填充：10px；
}
.标题{
填充：3倍；
}
.收割台跨度{
颜色：白色；
}
.nl txt main、.nl btn main{
显示：内联块；
}
.nl btn main.nl btn{
边界半径：5px；
背景：蓝色；
颜色：白色；
左：-50px；
位置：相对位置；
}
.nl txt main.nl txt{
宽度：200px；
边界半径：5px；
}

搜索我们的数据库

移除

左侧：-50px来自您的按钮


正文{
背景：#000；
}
.nl main{
宽度：300px；
边框：1px纯白；
边界半径：6px；
填充：10px；
}
.标题{
填充：3倍；
}
.收割台跨度{
颜色：白色；
}
.nl txt main、.nl btn main{
显示：内联块；
保证金：0；
}
.nl btn main.nl btn{
背景：蓝色；
颜色：白色；
左：-4px；
位置：相对位置；
边框右下半径：5px；
保证金：0；
边框右上角半径：5px；
}
.nl txt main.nl txt{
宽度：200px；
边框左下半径：5px；
保证金：0；
边框左上半径：5px；
}

搜索我们的数据库
我希望按钮作为文本框的一部分