title: Making a javascript countdown timer
body: <p>I am making a countdown timer where the text for Days Hours Minutes Seconds is just below to their respective values. Also it must be responsive too. I have some code below:</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>// Set the date we're counting down to
  var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();
  
  // Update the count down every 1 second
  var x = setInterval(function() {
  
    // Get todays date and time
    var now = new Date().getTime();
  
    // Find the distance between now and the count down date
    var distance = countDownDate - now;
  
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  
    // Display the result in the element with id="demo"
  
  
    document.getElementById("timer").innerHTML = "&lt;h1&gt;" + days + " &lt;span&gt; days &lt;/span&gt;: " + hours + "    &lt;span&gt;hours&lt;/span&gt;: " + minutes + " &lt;span&gt;minutes &lt;/span&gt;: &lt;font color='red'&gt;" + seconds + "&lt;span&gt; s&lt;/span&gt;&lt;/font&gt; &lt;/h1&gt;";
  
    // If the count down is finished, write some text 
    if (distance &lt; 0) {
      clearInterval(x);
  
      document.getElementById("timer").innerHTML = "EXPIRED";
    }
  }, 1000);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div align="center" id="timer"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My code has a problem in the case that the day symbol D is on left of the Day value but I want it to be on right. I mean just like picture below <a href="https://i.stack.imgur.com/ZQ0eZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZQ0eZ.png" alt="j"></a></p>