如何修复移动端下美元符号图片叠在odometer计数器上方的布局问题

现有两列表格布局，进行移动端响应式适配时，移动端视图下美元符号图片会显示在odometer计数器上方，需求为二者横向并排显示。
相关代码如下：

JS代码 #

setTimeout(function() {
         odometer.innerHTML = '1925'
     })

CSS代码 #

.fiftyFiftySection {
    background-color: #000;
  }
  .odometer {
    font-size: 3em;
    text-align: center;
    width: 180px;
  }
    table td{
      column-width: 1000px;
      text-align: center;
  }
  #dollarSign {
    height: 50px; 
    width: 30px;
    }
    #fiftyFiftySignImage {
      width:400px; 
      height:300px; 
      margin-left: -100px;
    }
  @media (max-width: 500px) {
    table td{
      column-width: 100px;
      text-align: left;
    }
    #dollarSign {
      /* uncomment out display when you want it to display */
      /* display: none; */
      width: 20px;
      height: 20px;
    }
    #currentEstimatedPayout {
      display: none;
    }
    #odometer {
      margin-right: 50px;
      margin-top: 20px;
    }
    #fiftyFiftySignImage {
      width:300px; 
      height:200px;
      margin-left: -50px;
    }
  }

HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer@0.4.8/themes/odometer-theme-train-station.css"> 
    <script src="https://cdn.jsdelivr.net/npm/odometer@0.4.8/odometer.min.js"></script>
<section class="fiftyFiftySection" id="fiftyFiftySection">
  <table>
    <tr>
      <th></th>
      <th></th> 
    </tr>
    <tr>
      <td>
        <img id="fiftyFiftySignImage" src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png">
      </td> 
      <td>
        <h4 id="currentEstimatedPayout" style="color: #ffffff;">Current Estimated Payout</h4>
        <!-- <br> -->
        <img id="dollarSign" src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt=""><div id="odometer" class="odometer">000000</div>
      </td>
    </tr>
  </table>
</section>

问题的核心原因是#dollarSign是行内元素，#odometer是div块级元素，块级元素默认独占一行，所以会自动换行显示，移动端单元格宽度缩小后该问题更明显，原有代码里给#odometer设置的margin-top: 20px也会加剧错位。
可以通过以下两种方案解决：

• 方案1：无需修改HTML结构，直接修改CSS属性，将两个元素设为行内块并居中对齐
  在移动端媒体查询中新增/修改如下样式：

@media (max-width: 500px) {
  /* 原有样式保留，新增以下内容 */
  #dollarSign {
    display: inline-block;
    vertical-align: middle; /* 调整对齐方式，可选top、bottom匹配需求 */
  }
  #odometer {
    display: inline-block;
    vertical-align: middle;
    width: 140px; /* 可根据实际情况缩小宽度避免挤不下换行 */
    font-size: 2em; /* 字号也可同步缩小适配移动端 */
    margin-top: 0; /* 移除原有导致错位的上边距 */
    margin-right: 0; /* 不需要右间距可直接移除 */
  }
}

• 方案2：新增父容器用flex布局，稳定性更高
  先修改HTML，给美元符号和odometer套一层父容器：

<!-- 原有HTML的对应部分替换为以下内容 -->
<div class="payout-group">
  <img id="dollarSign" src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt="">
  <div id="odometer" class="odometer">000000</div>
</div>

再添加对应CSS：

/* 全局或媒体查询内添加均可 */
.payout-group {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 8px; /* 两个元素之间的间距，可自定义调整 */
}

两种方案都可以实现横向并排效果，flex布局的适配性更强，推荐优先使用。

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