如何实现两个指定ID的Div并排显示且内部<b>位于Input上方？

我给你调整了两种可行的方案，选你习惯的就行：

方案1：浮动布局（兼容旧浏览器） #

<div style="overflow: hidden;"> <!-- 清除浮动，避免父元素高度塌陷 -->
  <div id="1" style="float: left;">
    <b style="color: #444444; display: block;">Date</b> <!-- 让b独占一行 -->
    <input class="duedatetextbox" type="text" placeholder="Enter date" tabindex="101">
  </div>
  <div id="2" style="float: left; padding-left: 80px;">
    <b style="color: #444444; display: block;">Time</b>
    <input class="duedatetextbox" type="text" placeholder="Enter time" tabindex="102">
  </div>
</div>

• 去掉了第二个div的clear:both，保留float:left，这样两个div就能横向排列
• 给<b>加了display:block，让它独占一行，自然就位于input上方
• 外层div的overflow:hidden是用来清除浮动的，防止父元素因为子元素浮动而高度为0

方案2：Flex布局（更现代简洁，推荐） #

<div style="display: flex; gap: 80px;"> <!-- flex让子元素横向排列，gap控制间距 -->
  <div id="1">
    <b style="color: #444444; display: block;">Date</b>
    <input class="duedatetextbox" type="text" placeholder="Enter date" tabindex="101">
  </div>
  <div id="2">
    <b style="color: #444444; display: block;">Time</b>
    <input class="duedatetextbox" type="text" placeholder="Enter time" tabindex="102">
  </div>
</div>

• 外层div用display:flex，直接实现子元素横向排列，不用折腾浮动
• gap:80px用来设置两个div之间的间距，比给第二个div加padding-left更灵活
• 同样给<b>加display:block确保它在input上方

如果不需要兼容IE10及以下的老旧浏览器，优先用flex布局，代码更干净，也不容易出现浮动带来的奇怪问题~

内容的提问来源于stack exchange，提问作者vheelique