试图将窗体的输出显示在与<；相同的行上；p>；元素html

我试图将此表单的某些元素显示在同一行上：我希望表单的输出显示在与“Total:$”相同的行上（我仍然希望每磅的价格（在本例中为1.00美元）显示在上面的行上，数字微调器显示在右边）。我试图将整个内容包装在一个

中，我将其CSS设置为

显示：内联

，但它不起作用（我还尝试了一些其他方法，但也不起作用）。
下面是我的代码选择：
HTML:

图例{float:左；
}
.inline{display:inline；}
.quant{文本对齐：右；
最大宽度：30em；
浮动：对；
}
表格>*{边框：1px纯红；线条高度：2em}

$1.00
数量
总数：$

谢谢，@Pcodea Xonos（我更喜欢JS，只是想让我的html达到标准&需要2从模型中制作出来）-去掉标记的技巧是将“总计”与总计放在同一行上。我还没有设计表单的样式-线条高度是将其与数字标记器和“数量”对齐的部分吗（仅供将来参考）？谢谢你的帮助！

 <div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend>$1.00</legend>
<span class="quant"><p><label for="quant">QTY</label>
 <input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
<span class="inline"><p>Total:$<output name="amount" for="quantity"></output></p></span>
</form>
</div>

legend { float: left;
         margin-top: 35px;
         padding-top: 20px;
         margin-bottom: 5px;
}
.inline { display: inline; }
.quant { text-align: right;
            max-width: 30em;
            float: right;
            margin-top: 25px;
            padding-bottom: 5px;
            margin-bottom: 10px;
}