之前和之后的H​​TML文本（前缀/后缀）输入字段

Question

我需要在同一行的输入字段之前和之后显示HTML文本。前缀和后缀在运行时添加，可能存在也可能不存在。我已经尝试了和组合。这就是我现在所拥有的：

这是我想要实现的目标（记住值有时不会存在，所以我希望文本输入在它们不存在时恢复该空间：

这是我当前的代码（我确实删除了一些类defs以使其更具可读性）：

<div>
    <div>Prefix and Suffix</div>
    <div class="row">
        <span style="display:inline-block">Test<input type="text" class="input">Dollars</span>
    </div>
</div>

我更喜欢不使用表格（只是div）的解决方案，但如果这是唯一的方法，那就这样吧。

Answer 1

使用flex似乎对我来说效果很好。可能值得一试。

   <div style="display:flex;">
       <div>Test&nbsp;</div>
       <input type="text">
       <div>&nbsp;Dollars</div>
    </div>