div how to make its dimensions exactly as those of the contents

stark

How do I form a div to have the same dimensions as those of the content housed by it , and not any larger ?

The div that I currently has a larger width than that of the three divs that i have placed inside it.How can i get it to fit the inner div’s size?

Here is the link to what i have now :: http://jsfiddle.net/jairajdesai/Fd5hQ/

HTML :

<div id="initial_options">
            <div class="option_button" id="option_1">
                <big>1</big> <span class="supplementary_text">text goes here</span>
            </div>
            <div class="option_button" id="option_2">
                <big>2</2></big> <span class="supplementary_text">text goes here</span>
            </div>
            <div class="option_button" id="option_3">
                <big>3</big> <span class="supplementary_text">text goes here</span>
            </div>
</div>

CSS :

#initial_options {
position:relative;
top:18%;
left:0;
z-index:10;
background-color:#eee;
}
.option_button{
width:20%;
border-radius:none;
}
#option_1{
background-color:#013adf;
}
#option_2{
background-color:#f7fe2e;
}
#option_3{
background-color:#ff0000;
}