How do I specify in CSS that a button should only take up as much width as its text?

Question

I have four elements that I would like to take up 100% of the width available in the parent DIV -- an image, a jQuery UI slider, another image, and a button.

<div id="sliderScaleDiv">
<div id="halo">
            <img width="75" src="http://www.clker.com/cliparts/n/c/1/B/r/q/angel-halo-with-wings.svg" alt="Angel halo" />
        </div>

    <div class="fluid">                                <div class="slider"></div>
                        </div>

        <div id="skull">
            <img width="75" src="https://temporarytattoos.com/pub/media/catalog/product/cache/image/700x560/e9c3970ab036de70892d86c6d221abfe/s/k/skull-and-crossbones-temporary-tattoos_1601.jpg" alt="Skull" />
        </div>

<form class="voteForm" id="new_vote" action="/votes" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="Yp7vN3kTCg2brdU3/yHknGxnE3I6V8xA/C3+zj4lbVN7qRS+pWWS/V4UPawx/gngJBkEpWGTZSMltOkSQuUfdw==">
            <input value="23" type="hidden" name="vote[person_id]" id="vote_person_id">
            <input type="hidden" name="vote[score]" id="vote_score">
            <button name="next" type="button" id="nextButton" class="btn-feedback">Skip</button>
</form>    

    </div>

The only item I would like to have a variable width is the slider (take up as much space as possible). Without hard-coding a pixel value for the button, how do I specify in CSS that I want the button to take up as much width as its text occupies but no more? Right now, it seems like all my items are getting compressed (at least the slider is not filling the remaining space) and I think its because I haven't specified some type of width CSS element for the button -- http://jsfiddle.net/u72596ta/8/ .

The styles I've used for the four elements are

#halo {
  position: relative;
  z-index: 20;
  vertical-align: top;
  display: inline-block;
  width: 75px;
  display: table-cell;
}

.fluid {
  display: table-cell;
}

#skull {
  position: relative;
  z-index: 20;
  vertical-align: top;
  display: inline-block;
  width: 75px;
  display: table-cell;
}

#nextButton {
    display: inline-block;
    display: table-cell;
}

Answer 1

If you change #nextButton to be display: inline-block and allow your .fluid to be width: 100% I think that might be close to the result you re looking for.

Example: http://jsfiddle.net/u72596ta/10/

EDIT: I also just did another glance over your code and noticed that you're overwriting the display property. Not sure if that's for debugging purposes or not. Another suggestion would be to combine your #halo and #skull selectors. Since they are using the same CSS declarations, it will make your stylesheet shorter and cleaner :)