JSFiddle - React, Tailwind, and code Playground

by manishie

HTML

<body>
    <p style="margin-left: 20px;">A</p>
    <p style="margin-left: 50px;">B</p>
    <br>
    <form>
        <select id="select1" style="float: left;">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
        </select>
        <select id="select2" style="float: left; margin-left: 20px;">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
        </select>
        <button style="float: left; margin-left: 20px;">Submit</button>
    </form>
    <br>
</body>

CSS

p, select {
    float: left;
}
br {
    clear: both;
    margin: 0;
    padding: 0;
    height: 0;
}
form {
    margin-top: 0;
    padding-top: 0;
}

JavaScript

// tell jquery to wait until the document has loaded
    $(function () {
        
        // setup an event handler to respond to the submit event
        $('button').click(function (event) {
            
            //combine the two values
            alert($('#select1').val() + $('#select2').val() + '.html');
            
            // for the purposes of this demo, disable the actual submit
            event.preventDefault();
        });
    });