JSFiddle - React, Tailwind, and code Playground

HTML

<select id="numOfcards">
    <option value="Select">Select</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>
</select>

<div class="thing"></div>

What I want to ultimately happen is this: When the option 1 is selected, the width is 100%. When the option 2 is selected, the width is 48%. When the option 3 is selected, the width is 33%. When the option 4 is selected, the width is 24%. When the option
5 is selected, the width is 19%.

CSS

.thing {
    background: red;
    width: 33%;
    height: 20px;
    transition: .25s;
}

JavaScript

$('select').on('change', function() {
    var selValue = parseInt(this.value, 10);
    switch (selValue) {
        case 1:
            $('.thing').css('width', '100%');
            break;
        case 2:
            $('.thing').css('width', '48%');
            break;
        case 3:
            $('.thing').css('width', '33%');
            break;
        case 4:
            $('.thing').css('width', '24%');
            break;
        case 5:
            $('.thing').css('width', '19%');
            break;
    }
});