Html 如何在文本框下定位SVG元素？

我试图做两件事：

使文本输入占据div中的所有空间。我当前的方法为左：0；右：0；但显然它不起作用。 将SVG放在与conainer div相对的位置，这样我就可以将它移动到我正在处理SVG中的滑块组件的文本inpit下面。 你可以从中看到它

有关于定位的线索吗？清楚：两者都没有用，无法将SVG发送到下一行？我能否以某种方式实现容器div元素的相对定位

更新：

我已经找到了解决定位问题2的方法。在容器div上使用position:relative，在input和svg两个子元素上使用position:absolute。看

---

尽管如此，问题1仍然存在。如何使文本输入填充整个容器div？

尝试将SVG放在下一行：

            .container {
                width: 400px;
                height: 45px;
                background: gray;
            }

            .textfield {
                clear: both;
                float:left;
                margin-right:100px;
            }

            .slider {
                width: 200px;
                height: 15px;
                border: 1px solid #741;

            }

---

关于第一部分。为什么不将输入文本字段设置为与div相同的大小

.textfield {
    width: 400px;
    height: 45px;
    clear: both;
}

---

它还具有将SVG移动到文本字段下的效果。

我知道您的想法是在文本字段的右边添加边距，但在我更一般的设计中，我不能这样做。我已经为问题的第1部分找到了一个解决方法，使用容器div的绝对定位。还有一个问题解决了这一部分：因为div的大小是动态生成的