JQuery not displaying full width Chosen

I am using the jquery chosen select and have one set to hidden and if anothers value is selected then the hidden one is shown. It works but when the second chosen is shown it is not the full width it should be.

<div class="form-group">
    <label for="textfield1" class="col-xs-3 col-lg-2 control-label">Month: <span class="mandatory">*</span></label>
    <div class="col-sm-9 col-lg-4 controls">
        <select class="form-control input-sm chosen" tabindex="1" data-placeholder="Choose a date..." data-rule-required="true" name="" id="month-list">
            <option value=""></option>
            <option value="FIRST_DAY_RENTAL_PERIOD">First day of rental period</option>
            <option value="LAST_DAY_RENTAL_PERIOD" >Last day of rental period</option>
            <option value="FIRST_CAL_DAY" >First calendar day</option>
            <option value="FIRST_CAL_DAY_PRORATE_DAY" >First calendar day (pro-rate daily)</option>
            <option value="FIRST_CAL_DAY_PRORATE_WEEK" >First calendar day (pro-rate weekly)</option>
            <option value="DAY_OF_MONTH">Specified day of month</option>
        </select>
    </div>
</div>

<div class="month-days">
    <div class="form-group">
        <label for="textfield1" class="col-xs-3 col-lg-2 control-label">Day: <span class="mandatory">*</span></label>
        <div class="col-sm-9 col-lg-4 controls">
            <select class="form-control input-sm chosen" tabindex="1" data-placeholder="Choose a date..." data-rule-required="true" name="" id="">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
            </select>
        </div>
    </div>
</div>

The jquery below works ok but once the chosen appears it looks like this. http://awesomescreenshot.com/01a1vuw8a1 It should show up the same width as the month above it

$('.month-days').hide();
$('#month-list').change(function(){
    if($("option:selected", this).val() == 'DAY_OF_MONTH'){
        $('.month-days').slideDown('fast');
    }else{
        $('.month-days').slideUp('fast');
    }
});

Solution

I had this problem some time ago, here is my proposal:

At first add #day-list id to second dropdown.

Add an event listener to first (#month-list) dropdown

$('select#month-list').on(
    'chosen:ready', 
    function() {//fires when first chosen dropdown is ready
        var mlCssWidth = $('select#month-list').closest('.chosen-container').css('width');
        //init second chosen after first one is ready
        $('select#day-list').chosen({/*other options*/, width: mlCssWidth});
    }
);

Then you can do something like this:

$('select#month-list').on(
    'chosen:updated', //or change?
    function() {
        var mlCssWidth = $('select#month-list').closest('.chosen-container').css('width');
        //correct second chosen width after first one is changed (and may have changed it's width if it was not hardocoded)
        $('select#day-list').closest('.chosen-container').css('width', mlCssWidth);
});

Of course you can cache jQuery objects/functions for simplification/performance.

PS: It would be simplier if you put it in jsfiddle ;-)