[FIXED] How can I position my progress bar at the bottom of a button?

Issue

I am facing a bit of an issue and I can't seem to figure it out.

I am trying to create a button and add a bootstrap progress bar at the bottom of it, but I cant seem to figure out how to get it to do just that.

Here's my current setup. https://jsfiddle.net/bob_mosh/7qeazm9w/3/

HTML:

<button id="sample_button" type="button" class="soundButton">
<label class="buttonTitle">Bird Song</label>
<label class="buttonDescription">A nice bird song.</label>
<div class="progress volume-slider">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</button>

CSS:

.soundButton {
    display: table-cell;
    background-color: rgba(255, 255, 255, 0.650);
    margin: 4px;
    padding: 8px;
    width: 250px;
    height: 120px !important;
    border-radius: 8px;
    border: none !important;
    float: left !important;
}

.soundButton label {
    color: rgba(37, 38, 43, 1.00) !important;
}

body {
  background-color: rgba(37, 38, 43, 1.00)
}

.buttonTitle {
    font-weight: 700;
    font-size: 1.5em;
    display: block;
}

.volume-slider {
    bottom:0;
    height: 8px !important;
}

This is the current state on the right and the way I am envisioning it on the left.

For some reason I cant get the absolute positioning to work. Every time I try to set the position of the progress bar to absolute, it completely disappears. Can anyone help me figure this out?

Solution

All you need to do is add position: relative; to your .soundButton class then copy this to your .volume-slider

.volume-slider {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 8px !important;
}

Working sample fiddle HERE

Answered By - JkAlombro

Answer Checked By - Robin (PHPFixing Admin)