title: put image beside div
body: <p>I have this, which is basically a table, with two columns, and I am trying my best to make the elements in said table, mobile responsive:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setTimeout(function() {
           odometer.innerHTML = '1925'
       })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
      }
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer@0.4.8/themes/odometer-theme-train-station.css"&gt; 
      &lt;script src="https://cdn.jsdelivr.net/npm/odometer@0.4.8/odometer.min.js"&gt;&lt;/script&gt;
  &lt;section class="fiftyFiftySection" id="fiftyFiftySection"&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt; 
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;img id="fiftyFiftySignImage" src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png"&gt;
        &lt;/td&gt; 
        &lt;td&gt;
          &lt;h4 id="currentEstimatedPayout" style="color: #ffffff;"&gt;Current Estimated Payout&lt;/h4&gt;
          &lt;!-- &lt;br&gt; --&gt;
          &lt;img id="dollarSign" src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt=""&gt;&lt;div id="odometer" class="odometer"&gt;000000&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>but as you can see, on mobile version, it puts the <code>dollar sign image</code> on top of the odometer, when I need it beside it! I don't know how to fix this, i've tried so many different things. any ideas?</p>