我怎樣才能讓一系列 div 彼此相鄰而不是彼此重疊？

Question

我有一個包含多個 div 類的表單頁面，每個div內稱為“輸入”是每個表單行的標簽和表單信息的input

其中之一的樣本：

 <div class="inputs"> <label for="ProductDesc:_">ProductDesc: </label> <input disabled="disabled" id="invoices_ProductDesc" name="invoices.ProductDesc" readonly="readonly" type="text" value="Storage charge SC160-0000059 - 5.0 HCTZ0044 2018"> </div> <div class="inputs"> <label for="SKU:_">SKU: </label> <input disabled="disabled" id="invoices_ProductSKU" name="invoices.ProductSKU" readonly="readonly" type="text" value=""> </div>

現在的顯示是這樣的：

產品描述

信息在這里

單品

SKU在這里

我怎樣才能讓它變成

產品描述 SKU

信息在這里SKU在這里

我嘗試在輸入上使用float:right ，我也嘗試使用display:inline但這似乎不起作用。

我想要的示例https://imgur.com/Evc0Hvs

Answer 1

在它們周圍包裹另一個 div 並將其設置為 flexbox 容器，將其樣式設置為display: flex

Answer 2

display: inline-block; 

應該可以正常工作，我認為還有其他樣式會影響整體樣式。

工作示例：

https://codepen.io/5amdev/pen/povqrYm