Html 引导输入组前置/加载项宽度调整

我在制作相同宽度的prepend附加组件时遇到问题。我使用的是令人敬畏的字体图标，前置字体的大小取决于每个特定的图标。我发现大约一年前的另一条线索描述了我的确切问题，但没有答案

以下是我的问题的截图：

我尝试使用各种CSS调整，但没有成功，包括前面提到的线程中提供的调整

相关HTML：

---

我认为最简单的答案是css网格

.wrapper
{
display:grid;
grid-template-rows: repeat(3,1fr) 2fr;
grid-template-columns: 15% 85%;
grid-row-gap:1rem
}

然后为第一列指定图标，并为第二列指定输入

---

希望这能回答您的问题。

我尝试了您的相同代码片段，只是对css进行了一些调整，它对我很有用。 我刚刚添加了以下css， 请使用此css，这将解决您的前置/附加宽度问题

。输入组文本{
宽度：40px；
}
.输入组文本范围{
保证金：0自动；
}

摄影师
编辑
统治

您还可以添加用于上述代码的css吗？