How to add text on countdown timer - css

Question

I have the following code and am looking to give my Countdown timer a title. Inside the bar, right above the boxes that give the time remaining. Would like it to be easy to edit font, size and spacing across. Having trouble doing so.
It also seems like when publishing this code, the padding for the variables: days, hours, mins, and secs get pushed down. Not centered under the boxes and the edge of the bottom of the countdown timer.
var target_date = new Date("Aug 30, 2018 20:30:00").getTime(); // set the countdown date
var days, hours, minutes, seconds; // variables for time units
var countdown = document.getElementById("tiles"); // get tag element
getCountdown();
setInterval(function() {
getCountdown();
}, 1000);
function getCountdown() {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = pad(parseInt(seconds_left / 86400));
seconds_left = seconds_left % 86400;
hours = pad(parseInt(seconds_left / 3600));
seconds_left = seconds_left % 3600;
minutes = pad(parseInt(seconds_left / 60));
seconds = pad(parseInt(seconds_left % 60));
// format countdown string + set tag value
countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
}
function pad(n) {
return (n < 10 ? '0' : '') + n;
}
body {
font: normal 13px/20px Arial, Helvetica, sans-serif;
word-wrap: break-word;
color: #eee;
}
#countdown {
/*bar*/
width: 232.5px;
/*changed*/
height: 56px;
/*changed*/
text-align: center;
background: #222;
background-image: -webkit-linear-gradient(top, #264033, #feb330, #feb330, #264033);
background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
background-image: -o-linear-gradient(top, #222, #333, #333, #222);
border: 1px solid #111;
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
margin: auto;
padding: 12px 0;
/*changed*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#countdown:before {
/*handles*/
content: "";
width: 4px;
/*changed*/
height: 32.5px;
/*changed*/
background: #444;
background-image: -webkit-linear-gradient(top, #264033, #264033, #264033, #264033);
/*changed*/
background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
background-image: -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
display: block;
position: absolute;
top: 24px;
/*changed*/
left: -5px;
/*changed*/
}
#countdown:after {
/*handles*/
content: "";
width: 4px;
/*changed*/
height: 32.5px;
/*changed*/
background: #444;
background-image: -webkit-linear-gradient(top, #264033, #264033, #264033, #264033);
/*changed*/
background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
background-image: -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
display: block;
position: absolute;
top: 24px;
/*changed*/
right: -5px;
}
#countdown #tiles {
position: relative;
z-index: 1;
}
#countdown #tiles>span {
/*box*/
width: 46px;
/*changed*/
max-width: 46px;
/*changed*/
font: bold 24px 'Droid Sans', Arial, sans-serif;
/*changed*/
text-align: center;
color: #000000;
/*color of numbers*/
/*changed*/
background-color: #ddd;
background-image: -webkit-linear-gradient(top, #111, #eee);
/*color of box*/
/*changed*/
background-image: -moz-linear-gradient(top, #bbb, #eee);
background-image: -ms-linear-gradient(top, #bbb, #eee);
background-image: -o-linear-gradient(top, #bbb, #eee);
border-top: 1px solid #fff;
/*top border of box*/
/*changed*/
border-left: 1px solid #fff;
/*left border of box*/
/*changed*/
border-right: 1px solid #fff;
/*right border of box*/
/*changed*/
border-bottom: 1px solid #fff;
/*bottom border of box*/
/*changed*/
border-radius: 3px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
margin: 0 3.5px;
/*changed*/
padding: 9px 0;
/*changed*/
display: inline-block;
position: relative;
}
#countdown #tiles>span:before {
/*mini-handles*/
content: "";
width: 100%;
height: 13px;
background: #000000;
/*changed*/
display: block;
padding: 0 3px;
position: absolute;
top: 41%;
left: -3px;
z-index: -1;
}
/* #countdown #tiles>span:after {
content: "";
width: 100%;
height: 1px;
background: #eee;
border-top: 1px solid #333;
display: block;
position: absolute;
top: 48%;
left: 0;
} /*line through middle*/
#countdown .labels {
/*words*/
width: 100%;
height: 12.5px;
/*changed*/
text-align: center;
position: absolute;
bottom: 8px;
}
#countdown .labels li {
/*words*/
width: 51px;
/*changed*/
font: bold 10px 'Droid Sans', Arial, sans-serif;
color: #ffffff;
/*changed*/
text-shadow: 1px 1px 0px #000;
text-align: center;
text-transform: uppercase;
display: inline-block;
}
<div id="countdown">
<div id='tiles'></div>
<div class="labels">
<li>Days</li>
<li>Hours</li>
<li>Mins</li>
<li>Secs</li>
</div>
</div>

Answer 1

I was able to just add a new div above the #tiles div and tweak the CSS to get a title to display where you wanted. Needed to change the padding of #countdown to get it to display properly.
<div id="countdown">
<div id='title'>Title</div>
<div id='tiles'></div>
<div class="labels">
<li>Days</li>
<li>Hours</li>
<li>Mins</li>
<li>Secs</li>
</div>
</div>
#countdown {
/*bar*/
width: 232.5px;
/*changed*/
height: 56px;
/*changed*/
text-align: center;
background: #222;
background-image: -webkit-linear-gradient(top, #264033, #feb330, #feb330, #264033);
background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
background-image: -o-linear-gradient(top, #222, #333, #333, #222);
border: 1px solid #111;
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
margin: auto;
padding: 0px 0px 32px 0;
/*changed*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Here is a fiddle.